SVG Placeholder Generator

Generate placeholder images with custom dimensions and colors

Settings

Width

Height

Background

Text

Custom text (leave empty for dimensions)

Preview

Output

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect fill="#e2e8f0" width="400" height="300"/><text fill="#64748b" font-family="system-ui,sans-serif" font-size="57" font-weight="500" text-anchor="middle" dominant-baseline="central" x="200" y="150">400x300</text></svg>

Data URI

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20fill%3D%22%23e2e8f0%22%20width%3D%22400%22%20height%3D%22300%22%2F%3E%3Ctext%20fill%3D%22%2364748b%22%20font-family%3D%22system-ui%2Csans-serif%22%20font-size%3D%2257%22%20font-weight%3D%22500%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20x%3D%22200%22%20y%3D%22150%22%3E400x300%3C%2Ftext%3E%3C%2Fsvg%3E

HTML img tag

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20fill%3D%22%23e2e8f0%22%20width%3D%22400%22%20height%3D%22300%22%2F%3E%3Ctext%20fill%3D%22%2364748b%22%20font-family%3D%22system-ui%2Csans-serif%22%20font-size%3D%2257%22%20font-weight%3D%22500%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20x%3D%22200%22%20y%3D%22150%22%3E400x300%3C%2Ftext%3E%3C%2Fsvg%3E" width="400" height="300" alt="400x300">

What is this?

Generates lightweight SVG placeholder images for use in mockups, prototypes, and development. SVG placeholders are resolution-independent and tiny in file size compared to raster images.