SVG Placeholder Generator

Generate lightweight SVG placeholder images with custom dimensions, colors, and text. Copy as SVG code, data URI, or download the file.

Width (px)

Height (px)

Background Color

Text Color

Text (leave empty for WxH)

Font Size (px)

Border Radius (px)

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
  <rect width="600" height="400" fill="#cccccc" rx="0" ry="0"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="24" fill="#666666">600×400</text>
</svg>

Frequently Asked Questions

What is an SVG placeholder image?

An SVG placeholder is a lightweight vector image used during development as a stand-in for real images. Because it's pure SVG markup, it loads instantly, scales to any size without pixelation, and can be embedded directly as a data URI.

How do I use the generated SVG?

You can copy the SVG code and paste it into your HTML, copy the data URI and use it as an img src or CSS background-image, or download the .svg file and serve it like any other image asset.

Can I customize the placeholder?

Yes — you can set the width, height, background color, text color, display text, font size, and border radius. The SVG updates in real time as you change settings.