Placeholder Image Generator — SVG Placeholders

Generate lightweight SVG placeholder images with custom dimensions, colors, and text. No external service needed.

Width (px)

Height (px)

Background

Text Color

Custom Text (empty = dimensions)

Font Size

Quick Sizes

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
  <rect width="100%" height="100%" fill="#e2e8f0"/>
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-family="Arial, sans-serif" font-size="50" fill="#64748b">600×400</text>
</svg>

Data URI

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%20viewBox%3D%220%200%20600%20400%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e2e8f0%22%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22central%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2250%22%20fill%3D%22%2364748b%22%3E600%C3%97400%3C%2Ftext%3E%0A%3C%2Fsvg%3E

HTML <img> Tag

Why SVG Placeholders?

SVG placeholder images are lightweight (just a few bytes of text), infinitely scalable, and require no external server or service. They work offline and load instantly.

Use Cases

Use placeholder images during web development, in mockups and wireframes, as fallback images, in documentation, or for testing responsive layouts with different image sizes.

Related Tools

Lorem Ipsum Generator

Generate placeholder text in paragraphs, sentences, or words.

Color Picker

Pick colors and convert between HEX, RGB, and HSL formats.

Aspect Ratio Calculator

Calculate aspect ratios and resize dimensions proportionally.