SVG placeholder generator

Placeholder images reserve space in a layout before the real photos, illustrations or product shots are ready. SVG placeholders are ideal: they are tiny text files, scale to any size without blurring and can show their own dimensions as a label. This generator creates them with the size, colours and text you choose.

How to use it

1. Enter the width and height in pixels.
2. Choose the background and text colours, and the label text if you want something other than the dimensions.
3. Copy the SVG markup, a Base64 data URI, or download the file.

Example output

<svg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'>
  <rect width='100%' height='100%' fill='#E5E7EB'/>
  <text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='sans-serif' font-size='32' fill='#6B7280'>640×360</text>
</svg>

Used as <img src='data:image/svg+xml;base64,...' width='640' height='360'>, it reserves exactly the space the final image will take.

Why placeholders matter

• Layout stability: giving images fixed dimensions prevents content from jumping as they load, which improves Cumulative Layout Shift (CLS), a Core Web Vital.
• Faster prototyping: designers and developers can build pages before assets exist.
• No external dependency: unlike placeholder image services, an inline SVG cannot go offline or slow down your page.

Tips

• Match the aspect ratio of the final image, such as 16:9 for hero banners or 1:1 for avatars.
• Use neutral greys so placeholders are not mistaken for real content.
• For lazy-loaded images, a placeholder in the dominant colour of the real image makes the swap less noticeable.