SVG Placeholder Generator

About SVG Placeholder Generator

How the Generator Works

Set your width and height, pick background and text colours, and optionally type custom display text. The tool builds an SVG element with a filled rectangle and centred text showing either the dimensions (e.g. "800 x 600") or your label. The preview updates in real time, and the output is available in four formats: raw SVG code, a base64 data URI, a URL-encoded data URI, and a ready-to-paste HTML img tag.

The SVG uses the viewBox attribute defined in the W3C SVG specification to map the coordinate system to your chosen dimensions. Text is centred with text-anchor="middle" and dominant-baseline="central", so the label sits perfectly in the middle regardless of font size. Font size auto-scales to one-eighth of the smaller dimension, with a floor of 12 px to keep tiny placeholders readable.

Setting	What It Controls	Default
Width	SVG viewBox and display width in pixels	800
Height	SVG viewBox and display height in pixels	600
Background colour	Rectangle fill colour	#e2e8f0 (slate-200)
Text colour	Dimension label colour	#64748b (slate-500)
Custom text	Override the default dimension label	None (shows "800 x 600")
Font size	Text size in pixels (0 = auto-scale)	0 (auto)

Base64 vs URL-Encoded Data URIs

The tool outputs both encoding formats because each has trade-offs. Taylor Hunt's widely referenced analysis on CodePen showed that URL-encoded SVG data URIs compress better under gzip than base64 equivalents. CSS-Tricks confirmed this separately: base64 adds roughly 33% overhead to the raw data, while URL-encoding keeps the original text structure intact and lets gzip find more repetition.

Encoding	Raw Size (typical 800x600 placeholder)	Gzipped Size	Browser Support	Best For
URL-encoded	~350-450 bytes	~180 bytes	All modern browsers	HTML img src, CSS background-image
Base64	~450-600 bytes	~280 bytes	All browsers including legacy	ASCII-only contexts, email HTML
Raw SVG inline	~250-350 bytes	N/A (already in document)	All modern browsers	Direct embedding in HTML source

In practice, URL-encoded data URIs are the better default for web projects. Base64 is useful when the SVG needs to travel through systems that strip special characters, like some email clients or older CMS platforms.

Why SVG Placeholders Instead of External Services?

External placeholder services like placehold.co or placeholder.com work fine during early prototyping, but they add HTTP requests that slow page loads. According to HTTP Archive data, the median desktop page already makes 77 requests (HTTP Archive, 2025 Web Almanac). Every placeholder image served from an external domain adds DNS lookup time, connection overhead, and a dependency on a third-party service staying online.

Approach	Typical Size	Network Request	Works Offline	Privacy
Inline SVG placeholder (this tool)	200-500 bytes	None	Yes	No external service
External placeholder service	2-5 KB	Yes (per image)	No	Third-party logs requests
Local PNG placeholder	5-50 KB	Yes (file request)	Yes	No external service
CSS-only placeholder (background-color)	0 bytes	None	Yes	No external service

SVG placeholders strike the best balance: they show actual dimensions and text labels (unlike plain CSS boxes), weigh almost nothing, and need zero network requests when inlined.

What Size Should a Placeholder Be?

The right size depends on where the image appears in your layout. These are the most common image dimensions used in web design as of 2026, based on platform documentation from Shopify, Squarespace, and the major social networks.

Use Case	Recommended Size	Aspect Ratio	Notes
Hero banner (full-width)	1920 x 1080	16:9	Standard safe width for desktops
Hero banner (short)	1920 x 600	~3.2:1	Loads faster with less visual trade-off
Blog feature image	1200 x 630	~1.91:1	Doubles as Open Graph image
Product card	600 x 600	1:1	Square works for most e-commerce grids
Profile avatar	200 x 200	1:1	Small file, usually clipped to circle via CSS
Grid thumbnail	400 x 300	4:3	Keep under 50 KB for real images
Open Graph / social share	1200 x 630	~1.91:1	Universal safe size across platforms
Mobile app screenshot	393 x 852	~9:19.5	iPhone 15/16 logical resolution

Use the aspect ratio calculator if you need to resize dimensions while keeping proportions locked.

How to Use SVG Placeholders in Your Code

Once you copy a data URI from the tool, you can use it anywhere an image source is expected. Here are the three most common patterns.

In an HTML img tag: paste the data URI directly into the src attribute. The tool generates a ready-to-paste img tag with width, height, and alt attributes already set. This is the fastest method for prototyping HTML layouts.

In CSS as a background: use the data URI in a background-image: url(...) declaration. URL-encoded SVGs work directly inside CSS url() without extra quoting. This is useful for card components, hero sections, or any element where the image is decorative rather than content.

In JavaScript or a framework: store the data URI in a variable or constant and pass it as a prop. Because it is a plain string, it works in React, Vue, Svelte, or any template system without a build step or import loader.

When you are ready to swap placeholders for real images, search your codebase for data:image/svg+xml to find every placeholder. The image resizer can help prepare real images at the exact dimensions your placeholders defined.

Performance Impact of Inline SVG

Inlining SVG placeholders as data URIs has a measurable effect on page load performance. Each eliminated HTTP request removes DNS resolution, TCP connection, and TLS handshake overhead for external domains. For pages using 10 or more placeholder images during development, that can save several hundred milliseconds of load time on slower connections.

SVG data URIs also avoid render-blocking: the image data is already present in the HTML document, so the browser can render it on the first paint without waiting for a separate resource to download. This improves Largest Contentful Paint (LCP), one of Google's Core Web Vitals. As of January 2026, about 67.6% of origins pass the LCP threshold according to Chrome UX Report (CrUX) data.

One thing to keep in mind: very large numbers of inlined SVGs (hundreds on a single page) will increase the HTML document size. For most development and prototyping workflows, this is not a concern - a page with 20 placeholders adds roughly 6-10 KB to the HTML, which is negligible compared to a median desktop page weight of 2.9 MB (HTTP Archive, 2025 Web Almanac).

SVG Anatomy of a Placeholder

Understanding the generated SVG helps if you want to tweak the output manually. The markup follows a minimal structure: a root <svg> element with xmlns, width, height, and viewBox attributes, a single <rect> for the background fill, and a <text> element for the label.

Worked example: an 800x600 placeholder with default colours produces roughly 280 bytes of SVG. The viewBox is set to 0 0 800 600, matching the width and height attributes exactly. The rect fills the entire viewBox with fill="#e2e8f0". The text element uses x="50%" y="50%" with text-anchor="middle" and dominant-baseline="central" to centre the label both horizontally and vertically. The font defaults to system-ui, sans-serif, which means the placeholder will use whatever system font the browser has available - no web font download required.

Special characters in custom text are automatically escaped: ampersands become &, angle brackets become < and >, and double quotes become ". This prevents the custom text from breaking the SVG XML structure, even if someone types something like <script> as the label.

When converting the SVG to a data URI, the URL-encoded version uses encodeURIComponent() to percent-encode the entire SVG string. The base64 version uses btoa(), which works reliably for ASCII SVG content. Both are valid in img src attributes and CSS background-image properties across all modern browsers.

Placeholder Images in Design Systems

Design systems and component libraries often standardise on a set of placeholder sizes that map to their image components. A typical system might define image slots for hero (16:9), card (4:3), avatar (1:1), and thumbnail (3:2) components. Generating SVG placeholders at exactly these ratios means components render with the correct layout proportions from the start, even before real images are available.

Teams working with tools like Storybook or design system documentation use placeholders heavily. Each component story needs an image, and using inline SVG data URIs means the stories render instantly without depending on a network connection or image CDN. When the design system ships, developers replace the placeholders with real images at the same dimensions, ensuring zero layout shift.

For responsive images, generate placeholders at the largest size you need and let CSS scale them down. A 1200x630 SVG placeholder still weighs under 400 bytes regardless of the nominal dimensions, because SVG is vector-based - the file size depends on the complexity of the shapes, not the coordinate space.

Common Mistakes with Placeholder Images

A few pitfalls come up repeatedly in development workflows that use placeholder images.

Forgetting to set alt text: even on placeholders, omitting alt attributes causes accessibility audit failures. The generated img tag includes a descriptive alt like "Placeholder 800x600" so screen readers announce something meaningful.

Using production-sized placeholders in development: a 1920x1080 SVG placeholder is still only 300-400 bytes, but if you later swap it for an unoptimised JPEG hero image, that could be 500 KB or more. Plan your image pipeline early.

Leaving placeholders in production: search for data:image/svg+xml in your build output before deploying. Placeholder images that ship to users look unprofessional and signal incomplete work.

Mismatched aspect ratios: if the placeholder is 800x600 but the real image slot uses object-fit: cover at 16:9, the layout will shift when the real image loads. Match placeholder dimensions to the actual container aspect ratio.

If you need to convert a finalised SVG placeholder to a raster format, the SVG to PNG converter handles that in the browser. For generating favicons from simple SVG shapes, try the favicon generator. Everything runs locally with no uploads.

Sources

• W3C - SVG 2 viewBox Specification
• MDN - Data URLs
• CSS-Tricks - Probably Don't Base64 SVG
• HTTP Archive - Web Almanac Page Weight
• web.dev - Largest Contentful Paint (LCP)
• MDN - SVG text-anchor Attribute