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.

What is the Placeholder Image Spec Generator?

Free placeholder image generator. Set dimensions, aspect ratio, background colour and a label to produce a self-contained SVG placeholder as a data URI or img tag. No external service, no network request — runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Placeholder Image Spec Generator

Name: Placeholder Image Spec Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Why inline SVG beats external placeholder services

Tools like placehold.it and picsum.photos are convenient, but they have drawbacks: they require a live network connection, their domains occasionally have downtime, and they pull real images that may not match the visual intent of your wireframe. An inline SVG data URI solves all three problems:

Works offline — the placeholder is embedded directly in the HTML, not fetched.
Fully controlled — you choose the exact colour, size, and label.
Self-contained — the prototype file is portable with no external dependencies.
Fast — no DNS lookup, no HTTP round-trip, no latency.

The trade-off is file size: a data URI adds a few hundred bytes per placeholder, which is negligible in development but would add up in production with dozens of them. Swap in real assets before shipping.

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 using the sRGB formula and picks black or white label text automatically 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.
Encodes the result as a data:image/svg+xml URI and wraps it in a ready-to-paste <img> tag.

Generated output example

A 300 × 300 avatar placeholder on a dark slate background (#3b4a6b) produces:

<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>

The white text is chosen automatically because the dark slate background has a low relative luminance. If you switch to a light background like #f0f0f0, the label switches to black text to maintain contrast.

Practical workflow tips

Use a colour system for your wireframe — for example, one grey for image placeholders, one blue for video, one green for avatars — so stakeholders can interpret the wireframe at a glance without real assets.
Label with content type, not size — a label like “hero image” or “product photo” communicates more than “1200 × 600” when sharing wireframes with non-technical reviewers.
Font size scales automatically — the label stays legible from 32×32 favicon-sized placeholders up to 1920-wide hero banners.
Data URIs grow the HTML linearly with the number of placeholders. For prototypes this is fine; switch to real optimised assets before deploying to production.