Wire-framing a layout where you need shaped placeholders before the real assets are ready. Building a Storybook or component library and needing per-component placeholder graphics without external requests. Testing image-loading code, lazy-loading thresholds, aspect-ratio CSS, or responsive image logic. Replacing a third-party placeholder service in a project that must work offline, under strict Content Security Policy, or without external dependencies. Generating quick mockups for documentation or design specifications where you need exact pixel dimensions. Creating throwaway placeholders for static site generators or build pipelines that need predictable SVG output.

Enter width and height in pixels. Non-square images work fine. Optionally set a custom label (defaults to the dimension ratio, e.g. "800×600"). The label is centred and automatically sized to fit. Choose background and text colours using the colour pickers (output as hex codes). Click Generate . The tool renders an SVG — a vector graphic defined as plain XML text. Copy the data URI (a URL starting with data:image/svg+xml; ) into an img src , CSS background-image , or HTML markup. Alternatively, download the raw SVG file to use locally.

SVG is vector, not raster. The data URI is an SVG string; it scales infinitely without blur, but a designer expecting a compressed PNG may be surprised. For a raster image, screenshot the preview or pipe the SVG through an SVG-to-PNG converter. Long data URIs are awkward in img src attributes. Browsers handle them, but linters, search-and-replace tools, and diff viewers often struggle with multi-kilobyte inline attribute values. For complex mockups, prefer downloading the SVG file or embedding it directly as markup. Label text is not localised. The auto-label is "W×H"; if you need a translation or custom text, type it in the label field. Colours are hex only. The colour pickers produce #rrggbb . If you need rgba() transparency or named colours, edit the downloaded SVG markup directly. Width and height are intrinsic, not display. Scaling the SVG via CSS will stretch or squeeze it. We use preserveAspectRatio="none" for predictable scaling, but text may look distorted if the aspect ratio changes significantly. Test in context. Don't ship the placeholder. Easy to forget in a fast iteration cycle — replace with the real asset before deploying to production.

Data URI: A URL you can paste directly into src or background-image . Works in modern browsers; check CSP directives if in doubt. SVG markup: Raw XML you can copy into HTML. Useful for static templates or when you need to edit the SVG later. SVG file: A downloadable .svg file. Ideal for design tools, archival, or sharing with a team.

Placeholder Image Generator

Generate inline-SVG placeholder images at any size with custom text and colours. Output as data URI or downloadable SVG.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

What is this for?

While designing a page, you often need an image of a specific size before the real asset is ready — a hero banner, a card thumbnail, an avatar, an OG image. Loading via placeholder.com or similar services works but adds an external HTTP request and a third-party dependency. This tool generates a self-contained inline SVG with the dimensions and label you specify, ready to paste into your HTML, CSS background-image, or React component as a data URI. Everything runs in your browser; nothing leaves your machine.

When to use it

Wire-framing a layout where you need shaped placeholders before the real assets are ready.
Building a Storybook or component library and needing per-component placeholder graphics without external requests.
Testing image-loading code, lazy-loading thresholds, aspect-ratio CSS, or responsive image logic.
Replacing a third-party placeholder service in a project that must work offline, under strict Content Security Policy, or without external dependencies.
Generating quick mockups for documentation or design specifications where you need exact pixel dimensions.
Creating throwaway placeholders for static site generators or build pipelines that need predictable SVG output.

How it works

Enter width and height in pixels. Non-square images work fine.
Optionally set a custom label (defaults to the dimension ratio, e.g. "800×600"). The label is centred and automatically sized to fit.
Choose background and text colours using the colour pickers (output as hex codes).
Click Generate. The tool renders an SVG — a vector graphic defined as plain XML text.
Copy the data URI (a URL starting with data:image/svg+xml;) into an img src, CSS background-image, or HTML markup. Alternatively, download the raw SVG file to use locally.

Common gotchas

SVG is vector, not raster. The data URI is an SVG string; it scales infinitely without blur, but a designer expecting a compressed PNG may be surprised. For a raster image, screenshot the preview or pipe the SVG through an SVG-to-PNG converter.
Long data URIs are awkward in img src attributes. Browsers handle them, but linters, search-and-replace tools, and diff viewers often struggle with multi-kilobyte inline attribute values. For complex mockups, prefer downloading the SVG file or embedding it directly as <svg> markup.
Label text is not localised. The auto-label is "W×H"; if you need a translation or custom text, type it in the label field.
Colours are hex only. The colour pickers produce #rrggbb. If you need rgba() transparency or named colours, edit the downloaded SVG markup directly.
Width and height are intrinsic, not display. Scaling the SVG via CSS will stretch or squeeze it. We use preserveAspectRatio="none" for predictable scaling, but text may look distorted if the aspect ratio changes significantly. Test in context.
Don't ship the placeholder. Easy to forget in a fast iteration cycle — replace with the real asset before deploying to production.

Output formats

Data URI: A URL you can paste directly into src or background-image. Works in modern browsers; check CSP directives if in doubt.
SVG markup: Raw XML you can copy into HTML. Useful for static templates or when you need to edit the SVG later.
SVG file: A downloadable .svg file. Ideal for design tools, archival, or sharing with a team.