Why use an SVG placeholder instead of a service like a remote image host?

An inline SVG data URI needs no network request, so it renders instantly and works offline. It also keeps your prototype self-contained, with no dependency on a third-party host that might go down or rate-limit you.

How is the label text colour chosen?

The tool computes the relative luminance of your background colour using the sRGB formula. If the background is light it uses black text, and if it is dark it uses white, so the label always meets a readable contrast level.

What colour formats are accepted?

Enter a hex colour as either three digits (#abc) or six digits (#aabbcc), with or without the leading hash. Invalid input falls back to a neutral grey so the placeholder always renders.

How is the aspect ratio reduced?

The width and height are divided by their greatest common divisor. So 640 by 360 reduces to 16:9, and 800 by 600 reduces to 4:3, giving you the simplest whole-number ratio.

Can I use these placeholders in production?

They are intended for wireframes, mockups and tests. SVG data URIs are perfectly valid in production too, but for real content you will usually swap in optimised raster or vector assets once the design is finalised.

Placeholder Image Spec Generator

A placeholder image stands in for real artwork while you build a layout, so you can see how a hero, thumbnail or avatar will sit on the page before the final asset exists. This generator builds a self-contained SVG placeholder with your chosen size, colour and label — no external host, no network round-trip, just an instant data URI you can paste straight into your markup.

How it works

You provide a width, height, background colour and optional label. The tool then:

Reduces the aspect ratio to its simplest whole-number form by dividing both dimensions by their greatest common divisor — so 640 × 360 becomes 16:9.
Measures the background’s relative luminance with the sRGB formula and picks black or white label text for readable contrast.
Emits a single SVG element containing a filled rectangle and a centred text node, with all special characters in the label XML-escaped so the markup stays valid.

The result is encoded as a data:image/svg+xml URI and also wrapped in a ready-to-paste <img> tag.

Example

A 300 × 300 avatar placeholder on a dark slate background produces SVG like this:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <rect width="300" height="300" fill="#3b4a6b"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
        font-family="system-ui, sans-serif" font-size="37" fill="#ffffff">300 × 300</text>
</svg>

Tips and notes

The font size scales with the smaller dimension, so the label stays legible from tiny thumbnails up to full-width banners.
Data URIs are great for prototypes; if you embed many large ones, the page HTML grows — switch to real files once the layout is settled.
Use a distinct colour per placeholder type (e.g. one for images, one for video) so your wireframe communicates intent at a glance.