SVG Image Placeholder
Generate placeholder images in SVG format for prototypes and development. Specify any dimensions instantly.
<img src="https://www.quantcdn.io/tools/placeholder.svg?width=400&height=250">
What is a placeholder image?
A placeholder image is a temporary graphic used during development and design phases before final images are ready. Placeholders help visualise layouts, test responsive behaviour, and maintain design consistency while real content is being prepared.
Why use SVG placeholders?
Resolution independent - SVG placeholders scale perfectly to any size without pixelation. A single SVG works on retina displays, mobile screens, and large monitors.
Lightweight - SVG placeholders are typically just a few hundred bytes regardless of dimensions. A 2000×2000 placeholder is the same file size as a 100×100 one.
No external dependencies - Unlike image placeholder services that require HTTP requests, SVG placeholders can be inlined or served from your own domain.
Customisable - SVG format allows easy modification of colours, text, and styling to match your design system.
Common use cases
Wireframing - Block out image positions in early design mockups without committing to specific content.
Frontend development - Test layouts and responsive behaviour before final images are available from the design team or CMS.
Documentation - Create consistent placeholder graphics for tutorials, API documentation, and style guides.
Prototyping - Quickly build interactive prototypes without waiting for image assets.
Testing - Verify that layouts handle various image aspect ratios correctly.
How to embed placeholder images
Embed a placeholder directly in your HTML:
<img src="https://www.quantcdn.io/tools/placeholder.svg?width=800&height=600" alt="Placeholder">Use in CSS as a background image:
.hero {
background-image: url('https://www.quantcdn.io/tools/placeholder.svg?width=1920&height=1080');
}In React or other frameworks:
<img
src={`https://www.quantcdn.io/tools/placeholder.svg?width=${width}&height=${height}`}
alt="Placeholder"
/>URL parameters
| Parameter | Description | Example |
|---|---|---|
width | Width in pixels | width=400 |
height | Height in pixels | height=300 |
Both parameters are required. The generated SVG displays the dimensions as text centered in the image.
How this tool works
Enter your desired dimensions above to generate an SVG placeholder. The tool creates a URL you can embed directly in your projects. The placeholder service runs at the edge via QuantCDN Edge Functions, generating SVGs on-demand with minimal latency worldwide.