<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360"> <rect width="640" height="360" fill="#0d9488"/> <text x="50%" y="50%" font-family="-apple-system,system-ui,sans-serif" font-size="45" font-weight="600" fill="#ffffff" text-anchor="middle" dominant-baseline="central">640×360</text> </svg>
About SVG Placeholder Generator
During layout work the real images often are not ready yet, so you need a precisely-sized placeholder that can label its own resolution. This tool builds SVG placeholders locally in your browser: set the width, height, background color, text color, and caption, and it assembles vector SVG code you can inline into HTML or turn into a Data URI. Being vector, it stays sharp at any scale, and being tiny, it saves more bandwidth than bitmap placeholders.
How to Use
- Open the SVG Placeholder Generator tool
- Enter or paste the content to process
- Adjust the output options as needed
- Click the Run button; results appear in real time
- Copy or export the result
Use Cases
- Layout blocking — Drop exactly-sized placeholder blocks into cards, carousels, or grids to tune a responsive layout first.
- Lazy-load base — Provide a lightweight SVG first paint for lazy-loaded images to stop layout shift before they arrive.
- Design annotation — Print dimensions like 800x600 right on the placeholder to align slice specs with designers.
- Offline ready — Replace placeholder links that depend on a third-party domain so intranet or offline pages still render.
- Inline Data URI — Convert the placeholder to a Data URI inside an img or CSS to save one HTTP request.
- Storybook dummy — Generate placeholder SVGs for component stories so every story renders without missing-image icons.
- Responsive test grid — Create placeholders at multiple aspect ratios to verify a CSS grid layout across viewports.
FAQ
Why SVG instead of a PNG placeholder?
SVG is vector, staying crisp and undistorted at any size, and a few hundred bytes of code can describe a whole image — far smaller than an equivalent PNG, which is ideal for placeholders.
How do I use the generated SVG on a page?
Three ways: inline the SVG code directly in HTML, save it as a .svg file referenced by an img, or convert it to a Data URI used in src or a CSS background.
Does the caption text scale automatically?
Font size can be set relative to the width and height and centered with text-anchor. If your container is responsive, give the SVG a width of 100% so it scales proportionally.
Can I batch-generate several sizes?
Generate them one size at a time, commonly for multi-resolution placeholders in a responsive srcset. For random colored blocks, change the background color and generate again.
Does SVG in a Data URI need escaping?
Yes. When placed directly in CSS, characters like # must be URL-encoded, or wrap it in base64, or some browsers fail to parse it. This tool outputs a ready-to-use form.