useSignal logouseSignal

Image Placeholder

SVG Placeholder Images

Generate SVG placeholder images that stay crisp at any resolution — custom sizes, text, colors, and patterns from a simple URL or visual studio.

  • Any size up to 4000 px
  • Copy a URL, HTML, Markdown, or JSX
  • PNG and SVG downloads

Quick mode

Full workspace

Controls

Placeholder settings

Size presets

Common developer image sizes

Dimensions

Text

Visual style

Fast tasteful starting points

Appearance

Branding

Live preview

1200×630 placeholder

Live placeholder preview
1200×630Minimal · minimal

Direct URL

Most used
https://www.usesignal.dev/placeholder/1200x630

HTML

<img src="https://www.usesignal.dev/placeholder/1200x630" alt="1200 by 630 placeholder" width="1200" height="630" />

Markdown

![Placeholder image](https://www.usesignal.dev/placeholder/1200x630)

React (JSX)

<img src="https://www.usesignal.dev/placeholder/1200x630" alt="1200 by 630 placeholder" width={1200} height={630} />

CSS background

background-image: url("https://www.usesignal.dev/placeholder/1200x630");
The full workspace addsSave with a nameShare linksReopen saved workYour work comes with you

Use it as a URL

A placeholder is just a link.

Put the size in the path and style it with query parameters. It works anywhere an image URL does: an<img>tag, Markdown, CSS, or a design mock. Images are SVG, so they stay sharp at any size.

/placeholder/600x400?text=Product+shot&style=dark&pattern=dots
ParameterWhat it does
/placeholder/600x400Width × height, up to 4000 each
text=HelloThe label; defaults to the size
bg=0f172aBackground colour, hex without #
color=f8fafcText colour, hex without #
style=darkminimal, grid, gradient, dark, or glass
pattern=gridplain, grid, diagonal, dots, or minimal
radius=24Corner radius in pixels
fontSize=48Text size; automatic when left out
brand=0Hides the small useSignal label

URL-first placeholders

Create mock image URLs that are easy to paste into HTML, docs, markdown, prototypes, and component demos.

Design-safe defaults

Start from clean colors, readable typography, and subtle patterns instead of loud placeholder blocks.

Snippets ready

Copy the direct URL, HTML image tag, Markdown image, React image, or CSS background snippet from one workspace.

Why it helps

Why use SVG for placeholder images

  • SVG placeholders stay sharp at every zoom level and screen density, unlike fixed-size PNG blocks.

  • File sizes stay tiny regardless of dimensions — a 1920x1080 SVG placeholder weighs about the same as a 100x100 one.

  • Text labels render as real text, so size annotations stay readable in mockups and documentation.

How to use it

How to generate an SVG placeholder

  1. 1

    Request /placeholder/{width}x{height} — the URL API serves SVG by default.

  2. 2

    Style it with query parameters or design it visually in the studio with live preview.

  3. 3

    Copy the URL, HTML, Markdown, React, or CSS snippet, or download the file.

Quick tips

SVG placeholder tips

  • Use SVG placeholders in responsive layouts — one URL covers every breakpoint without srcset variants.

  • Need a raster file for tools that reject SVG? Export PNG from the studio at the same dimensions.

  • Inline the SVG markup directly into HTML when you want zero extra requests in a prototype.

FAQ

SVG placeholder questions

Why choose SVG over PNG placeholders?

SVG scales without blurring, keeps file sizes tiny at any dimensions, and renders text labels crisply on high-density screens.

Can I use SVG placeholders in an img tag?

Yes. Browsers render SVG in img tags, CSS backgrounds, and Markdown images exactly like raster formats.

Can I still get a PNG version?

Yes. The studio exports PNG at your chosen dimensions when a tool or platform doesn't accept SVG.

Can I customize the SVG placeholder style?

Yes. Size, text, background, foreground, corner radius, and pattern are all configurable from the URL or the visual studio.

Open the main Image Placeholder page

This page focuses on one search intent. The main tool page includes the broader product overview, related workflows, and full use cases.

Open the main Image Placeholder workflowPlaceholder Image URL APIImage Placeholder GeneratorImage Optimizer