SVG Placeholder Generator

Designers, front-end engineers and CMS template authors all have the same recurring need: a rectangle of known dimensions with a hint of what content goes there. Historically this was solved with raster placeholder services — via.placeholder.com, the Lorem Picsum hosts, or by exporting a quick PNG from Figma. Each of those approaches has costs: a runtime HTTP request, a tracking pixel, an external dependency that the page now depends on. SVG placeholders side-step all of that because they are tiny self-contained vector images you can embed inline.

Why SVG and not raster

This tool's default 1200×630 placeholder is 337 bytes as SVG. Drawn to a canvas and saved as PNG in Chromium, the same image came to 27,332 bytes (measured 28 Sep 2026) — an optimiser would shrink that, but not to a few hundred bytes. Smaller is faster — and SVG scales infinitely, so the placeholder looks correct on every screen density without serving multiple resolutions. SVG also embeds cleanly into HTML, CSS (via data URIs) and React/Vue/Svelte components without going through an image-pipeline step. For local development and CMS template work, the SVG placeholder is almost always the right choice.

The three output formats

The tool above produces three representations of the same image. The raw SVG form is the actual XML markup; paste it directly into a JSX/Vue component or into a template file. The data URI form encodes the SVG (as UTF-8, so any label text works) as a data:image/svg+xml;base64,... URL that fits inside any CSS background-image: url(...) rule or an <img src="..."> attribute. The img tag form gives you a complete HTML element with the data URI already wired in — copy and paste into a page mockup. All three forms are functionally equivalent; the format you want depends on where the placeholder is going.

A note on real production images

SVG placeholders are wonderful for prototypes and CMS templates. They are not a substitute for real production imagery. Marketing pages need actual photographs, branded illustrations, or AI-generated art with proper rights. The placeholder workflow is: ship the mockup with SVG placeholders, validate the layout with stakeholders, then swap each placeholder for the real image before launch.

Accessibility considerations

SVG placeholders are technically images and need alt attributes when used as <img> tags. The placeholder text inside the image is not read by screen readers — it's rendered text in vector form, not actual HTML text — so the alt attribute matters even when the image self-labels visually. For decorative placeholders (filler in a layout demo), alt="" is the correct value; for placeholders standing in for a real image whose content is meaningful, give them a real description that the eventual final image's alt would carry.

Cache and CSP gotchas

Two operational notes. First, an SVG embedded via a data URI is bytes-in-the-DOM — it does not hit the network, so it cannot be cached separately from the HTML. For repeated use across a site, save the SVG as a real .svg file and reference it by URL. Second, if your Content Security Policy has a strict img-src directive, data URIs are blocked by default — add data: explicitly to allow them.