SVG placeholder generator

Generate placeholder SVGs: size, solid or gradient background, label and font size, corner radius, border, padding and plain/grid/diagonal styles, with SVG source, data URI and img usage.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Size

WidthHeight

Use a linear gradient

Background

TextLeave empty to show "width × height"

Font size0 means auto, based on the sizeText color

Corner radiusBorderPaddingBorder color

Style

Preview

The preview is the final SVG; right click to save it as .svg

SVG source

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" role="img" aria-label="600 × 400">
  <rect x="0" y="0" width="600" height="400" rx="0" ry="0" fill="#EEEEEE" />
  <text x="300" y="200" fill="#808080" font-family="system-ui, sans-serif" font-size="80" text-anchor="middle" dominant-baseline="central">600 × 400</text>
</svg>

Data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSI2MDAgw5cgNDAwIj4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgcng9IjAiIHJ5PSIwIiBmaWxsPSIjRUVFRUVFIiAvPgogIDx0ZXh0IHg9IjMwMCIgeT0iMjAwIiBmaWxsPSIjODA4MDgwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjgwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCI+NjAwIMOXIDQwMDwvdGV4dD4KPC9zdmc+

HTML usage

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSI2MDAgw5cgNDAwIj4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgcng9IjAiIHJ5PSIwIiBmaWxsPSIjRUVFRUVFIiAvPgogIDx0ZXh0IHg9IjMwMCIgeT0iMjAwIiBmaWxsPSIjODA4MDgwIiBmb250LWZhbWlseT0ic3lzdGVtLXVpLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjgwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCI+NjAwIMOXIDQwMDwvdGV4dD4KPC9zdmc+" alt="600 × 400" width="600" height="400" />

What this tool does

Drop a placeholder into a prototype or skeleton screen with the size written on it, then swap in the real image later instead of hunting for temporary assets.
Keep placeholder styling consistent across a site: solid or gradient background, grid or diagonal texture, corner radius and border.
Turn the SVG into a data URI and inline it in CSS or HTML, saving an image request and any external file.
Use SVG when you need a placeholder that scales without blur — it is far smaller than a PNG of the same size.

Example

Input

Width 600, height 400, background #EEEEEE, empty text, font size 0 (auto), text colour #808080, plain style

Output

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" role="img" aria-label="600 × 400">
  <rect x="0" y="0" width="600" height="400" rx="0" ry="0" fill="#EEEEEE" />
  <text x="300" y="200" fill="#808080" font-family="system-ui, sans-serif" font-size="80" text-anchor="middle" dominant-baseline="central">600 × 400</text>
</svg>

With the text field empty the label becomes "width × height", i.e. 600 × 400. Auto font size is one fifth of the shorter content side: 400 ÷ 5 = 80. Colours are emitted as upper-case hex.

Frequently asked questions

How is the font size calculated when I leave 0?

It takes one fifth of the shorter side of the padded content box, with a minimum of 8. For 600 × 400 with no padding that is 400 ÷ 5 = 80. Type a font size to override it — once set, no auto calculation happens.

Does padding change the image size?

No. Padding only pulls the label towards the centre; the canvas stays 600 × 400. It is also clamped to half of the shorter side so the content box can never go negative (it is at least 1 × 1).

Can I use a gradient together with grid or diagonal?

Yes. With a gradient the texture is drawn on top of it and the two combine. If you want a solid colour plus texture, turn the gradient off and pick grid or diagonal — the texture is then laid over the colour block with its own pattern.

Can I write #RGB, or omit the #?

Yes. Three, four, six and eight digit hex all work (three digits expand, so #EEE becomes #EEEEEE), the # is optional (EEEEEE is fine), and case does not matter. Anything unrecognised answers "Colors must be valid HEX values".

Does the generated SVG request external resources?

No. It only uses inline rect, text, pattern and gradient elements, with system-ui as the font stack and no external links at all. The data URI version works offline too.

Keywords：svgplaceholderimagemockupdata uribase64占位图占位符图片占位原型图骨架图

What this tool does

Example

Frequently asked questions

Related tools