SVG Placeholder Generator

Generate lightweight SVG placeholder images with custom dimensions, colors, text, and border radius.

SVG Placeholder Generator tool

Loading...

Example

Input: Width 400, Height 300, default colors, Display Text empty and Font Size 0 (auto)

Result: A 400 x 300 SVG with a #E5DDD5 background and the centered text "400x300" at font-size 37.5, plus URL-encoded and Base64 data URIs

Auto font size is one eighth of the shorter side (300 / 8 = 37.5), with a 12 px minimum, so the label scales with the placeholder.

  1. Enter the desired width and height for the placeholder image in pixels.
  2. Enter a background color and text color as hex codes or any other CSS color value.
  3. Type custom display text or leave it blank to show the dimensions automatically.
  4. Preview the generated SVG placeholder in real time.
  5. Copy the SVG code or data URI, or download the placeholder as an SVG file.

Lightweight SVG Placeholder Images for Mockups

This tool makes a simple placeholder image as SVG code: a colored box of any size with a label such as 400x300 in the middle. Copy the markup or a data URI, or download the .svg file.

Placeholders fill the gaps while real images are still missing. You might use them in wireframes, prototypes, CMS templates or layout tests. An SVG placeholder beats a bitmap because it is tiny and sharp at any size. The default 400 x 300 placeholder is about 300 bytes of code.

You control the width and height (1 to 4,096 pixels), the background and text colors, the label, the font size and the corner radius. Colors accept any CSS value, such as #E5DFD7, rgb(200, 200, 200) or a name like lightgray. The label shows the size unless you type your own text. Font size 0 means automatic: one eighth of the shorter side, but never below 12 pixels. The preview updates as you type.

There are three ways to use it. The SVG markup can go straight into HTML. The URL-encoded data URI and the Base64 data URI both work in an img src or a CSS url(). Here the Base64 version is usually the shorter one. The URL-encoded version encodes every space and bracket, and for the default placeholder it is about 520 characters against about 430 for Base64. The label uses the viewer's default sans-serif font, so it can look slightly different on each system.

For a bitmap version, convert the download with SVG to PNG. To pick sizes that match a layout, try the Aspect Ratio Calculator.

Sources

Frequently Asked Questions

Either paste the SVG markup straight into your HTML where the image should go, or copy a data URI and use it as the source of an img tag, like <img src="data:image/svg+xml;base64,..." alt="Placeholder">. Both show the same box. Downloading the .svg file and linking to it also works.
Either works in modern browsers. In this tool, Base64 is usually shorter, because the URL-encoded version escapes every space, bracket and quote. For the default 400 x 300 placeholder, Base64 is about 430 characters and URL-encoded about 520. Pick URL-encoded only if you want the SVG to stay partly readable.
With Font Size set to 0, the label is one eighth of the shorter side, with a minimum of 12 pixels. A 400 x 300 placeholder gets 37.5 pixel text, and a 64 x 64 one gets 12. Enter your own size if a long custom label does not fit.
Yes. Type any text in Display Text, such as Hero image or Product photo. Clear the field to go back to showing the dimensions, which update automatically as you change the width and height. Special characters like & and < are escaped, so they display correctly.

Related Tools

Image Resizer

Resize images to exact pixel dimensions with an optional aspect ratio lock, entirely in your browser.

Image and Media

Aspect Ratio Calculator

Calculate and convert aspect ratios for images, videos, and screens. Find missing dimensions instantly.

Image and Media

QR Code Generator

Generate QR codes for URLs, text, vCards, and WiFi credentials. Download as SVG or PNG instantly.

Image and Media

Favicon Generator

Upload an image and generate favicon files in multiple sizes for websites and web apps. Client-side only.

Image and Media