Build a placeholder image as an SVG data URI. Pick size, colours and label, then copy the markup, the data URI or a ready-made img tag. No requests, no external service.
Placeholder images with no request attached. Set the dimensions, colours and label, and copy out the raw SVG, a data URI or a complete img tag. Nothing is fetched, so the placeholder still works offline and inside a design file.
Empty falls back to the width and height, which is what most placeholders want.
Preview
Why an inline SVG beats a placeholder service
A data URI is not a network request
Placeholder services are convenient right up to the moment they are not: the domain rate-limits you, the office proxy blocks it, you demo on a plane, or the service quietly changes its output and half your mockups shift. Every one of those failures is caused by the same thing - the placeholder lives on someone else's server.
An SVG data URI has no such dependency. The whole image is a string sitting in your markup, so it renders identically offline, inside an email client, in a static export and in a screenshot taken three years from now. It also costs nothing in latency: there is no DNS lookup, no connection, no round trip. For a page with twenty placeholders during development, that difference is very noticeable.
Keep it URL-encoded rather than base64
The data URI this tool emits is percent-encoded, not base64. Both are valid, but percent-encoding is the better default for SVG for two reasons.
The first is size. Base64 inflates the payload by roughly a third, whereas percent-encoding only expands the handful of characters that actually need escaping, so for SVG - which is mostly plain ASCII - it usually ends up shorter. The second is readability: you can look at a percent-encoded SVG in your stylesheet and still recognise what it is, tweak a colour, or spot a typo. A base64 blob has to be decoded before it means anything.
The one thing percent-encoding needs care with is the single quote, which is why it is escaped explicitly here: CSS url() values are commonly wrapped in single quotes, and an unescaped apostrophe inside the SVG would terminate the value early.
Sizing, scaling and the viewBox
The generated SVG carries both explicit width and height attributes and a matching viewBox. That combination is deliberate. The width and height give the browser an intrinsic size so the layout does not jump before the image is laid out, and the viewBox lets the same image scale cleanly to any size you set in CSS.
Because it is vector, the label stays sharp at any scale - no blurry text on a high-DPI display, no separate 2x asset. If you want the placeholder to fill its container, set width: 100%; height: auto in CSS and the viewBox will preserve the aspect ratio for you. If you want a fixed box regardless of aspect ratio, keep the attributes as generated and the browser will honour them.
Frequently asked questions
Why does the label default to the dimensions?
Because that is what a placeholder is usually communicating: how big the slot is. Leaving the field empty shows "600x350" style text, and typing anything replaces it.
Can I use the data URI in CSS?
Yes. Drop it into `background-image: url('...')`. Single quotes inside the SVG are escaped for exactly this case, so the value will not terminate early.
Will the text scale with the image?
Yes. The SVG has a viewBox, so the whole graphic including the text scales proportionally when you resize it with CSS. The font size you pick is relative to the viewBox, not to the rendered pixels.
Is base64 available instead?
Not from this tool, deliberately. Percent-encoding is usually shorter for SVG and stays human-readable, which makes it easier to tweak a colour later without re-generating.
Do named colours work, or only hex?
Both. Any CSS named colour such as `tomato` or `slategray` is accepted in the text field, alongside 3-, 6- and 8-digit hex values.
Does the placeholder work in email?
Support for SVG in email clients is patchy - Gmail in particular strips it. For email, render the SVG to a PNG first. For web, apps and design tools, the data URI is fine.