SVG Placeholder Generator
Generate a placeholder image at any size — set dimensions, colors, and a label, then copy the SVG or drop it straight into CSS or HTML. No server, no upload.
Style
Preview
400 × 300 px
Why use SVG placeholders?
SVG placeholders are infinitely scalable, load instantly (no network request when embedded as a data URI), and can be generated for any exact size. They are ideal for layout mockups, skeleton screens, and anywhere you need a stand-in image without depending on an external image host.
Frequently Asked Questions
How do I use this as an img src?+
Copy the HTML <img> snippet — it uses a data URI so no separate file is needed. Paste it directly into your HTML and it renders immediately. The image scales to whatever size you set its CSS dimensions to, because SVG is resolution-independent.
What is the Hatched style?+
Hatched fills the background with a repeating diagonal line pattern using SVG's built-in <pattern> element — no images or external assets. It mimics the classic wireframe placeholder look used in design tools like Balsamiq.
Is anything sent to a server?+
No. The SVG is generated entirely in your browser using JavaScript string templates. Nothing is uploaded or logged.
Can I use the generated placeholder in a responsive layout?+
Yes. Because the output is SVG, it scales to any CSS size without losing quality. Set width and height to your intended base dimensions for the correct aspect ratio, then control the displayed size with CSS. The SVG will scale proportionally and stay sharp at any resolution.
Related Tools
How to use
- Set the width and height — the preview updates instantly.
- Pick a background and text color, or type a hex value directly.
- Leave the label blank to show the dimensions, or type custom text.
- Choose Solid or Hatched style, then copy the output you need.