SVG Placeholder Generator

Create custom placeholder images for your UI mockups. Set width, height, colors, and label text — then copy as SVG, data URL, or download the file.

Width (px)Height (px)Background

#CCCCCC

Text color

#666666

Label (optional)Font size: 24px

⬇ Download SVG

SVG Code

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

Use in HTML:

<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A..." alt="placeholder"><img src="placeholder-800x600.svg" alt="placeholder">

Frequently Asked Questions

What is an SVG placeholder image?

An SVG placeholder is a lightweight vector image used during development to fill space where real images will eventually go. Because SVG is text-based, it can be embedded directly in HTML or used as a data URL.

How do I embed the SVG in my HTML?

Use the inline SVG code directly inside your HTML, or use the data URL as the src attribute of an <img> tag. Data URLs work anywhere a regular image URL is accepted.

Are there size limits?

There are no hard limits in this tool. However, very large dimensions (e.g., 5000×5000) will produce large data URLs that may slow down your page.

Can I use the generated SVG in CSS?

Yes. Paste the data URL into a CSS background-image property: background-image: url('data:image/svg+xml,...').

What Are Placeholder Images?

Placeholder images are temporary visuals used during UI design and development to show where a real image will appear, at the correct dimensions, without requiring actual photos. They prevent layout shifting and give a realistic feel to mockups and prototypes.

SVG vs Raster Placeholders

Feature	SVG	PNG/JPEG
File size	~200 bytes	Several KB even for a simple grey box
Scalability	Resolution-independent	Blurry at 2× if exported at 1×
Inline in HTML	Yes — embed directly	Requires img src or background-image
Data URI length	Very short	Long base64 string

Using as a Data URL

<!-- Inline SVG in an img tag -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...%3E"
     width="640" height="360" alt="placeholder">

/* Or as a CSS background */
.placeholder {
  background-image: url("data:image/svg+xml,...");
}