Create a placeholder image at any size

Generate a labelled SVG placeholder at requested dimensions and return it as an image data URL.

freeworks offlinenothing uploaded
ToolPlaceholder Image
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Width and height become the SVG viewport, a background rectangle fills it, and centred text is scaled from the shorter dimension. Without a label, the dimension pair is used as text.

  • The dimension label is the initial text.
  • Font size is capped and scaled for typical placeholders.

Worked example

Create a labelled placeholder
Input
											Width: 320
Height: 180
Text: Preview
Output
												data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjE4MCI+...

When to use this

Wireframes reserve image slots, responsive layouts test aspect ratios, and documentation mocks use labelled assets.

Edge cases

  • Long labels shrink but are not line-wrapped.
  • SVG text depends on the viewer’s available font.
  • Zero or negative dimensions do not form a usable viewport.

References