What's the difference between SVG, PNG, and JPEG output?

SVG is vector — infinitely scalable and tiny in file size, perfect for inlining in HTML or CSS backgrounds. PNG is a raster format with lossless compression and transparency support. JPEG is raster with lossy compression — smaller file sizes for photographs but no transparency. For placeholders specifically, SVG is almost always the right choice unless your platform doesn't accept SVG (some legacy CMS systems, social media uploads).

How is this different from placeholder.com or via.placeholder?

Those services generate images on a remote server when you load the URL — they require network requests and they can go down. This tool generates images locally in your browser. You can paste the SVG inline, download the file, and use it offline. There's also no analytics or referrer leakage — those services log every request to their domain.

Why does my downloaded PNG look blurry?

PNG and JPEG export goes through a Canvas raster step. If your browser zoom is set to non-100% or you're on a high-DPI screen, the raster size may differ from your specified pixel dimensions. The exported file is always at the dimensions you set, but on-screen rendering may scale it. SVG export is unaffected because it remains vector.

Can I use these images commercially?

Yes — they're plain rectangles with text generated by your browser. There's no copyright on simple geometric output and you don't need to credit anyone. Use them in mockups, prototypes, presentation slides, design systems, alt-text fillers, anywhere you need a placeholder. The tool itself is free under MIT-style terms; the images you generate belong to you.

Why is the font system-ui instead of a custom font?

system-ui falls back to the operating system's UI font — San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android. This keeps the SVG file small (no embedded font), and the placeholder reads naturally on every device. Custom fonts would either need to be embedded (huge file size) or referenced externally (defeats the offline / inline use case).

占位图生成器

以任意尺寸、颜色和标签创建自定义占位图。可下载为 SVG、PNG 或 JPEG — 全部在浏览器内完成。

常用尺寸

宽度 (px)

高度 (px)

背景色

文字颜色

自定义文字

字号: 48px

格式

预览

800 × 600 (SVG)

SVG 源码

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <rect width="100%" height="100%" fill="#e2e8f0"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#475569" font-family="system-ui, -apple-system, sans-serif" font-size="48" font-weight="600">800 × 600</text>
</svg>

使用方法

以任意尺寸、颜色和标签创建自定义占位图。可下载为 SVG、PNG 或 JPEG — 全部在浏览器内完成。

1Pick a preset size (square, banner, hero, OG, etc.) or type custom width and height in pixels.
2Choose background and text colors — defaults to a neutral gray that works as a stand-in for any UI.
3Type custom label text or leave it blank to auto-show the dimensions (e.g., 800 × 600).
4Pick the output format — SVG for inlining, PNG for transparency, JPEG for smaller file size.
5Click 'Download' to save the file, or 'Copy SVG' to grab the markup for inline use in HTML or CSS.

主要功能

Six common-size presets including OG (1200×630), hero (1600×900), avatar (256×256)
Three export formats — vector SVG, lossless PNG, compressed JPEG (92% quality)
Custom text and font size — leave blank to auto-display dimensions
Color picker plus hex input for both background and foreground — match any brand palette
Generated entirely in your browser — no requests to placeholder.com or other third-party services

常见问题

了解更多

Placeholder Images in 2026 — When to Inline SVG and When to Just Download a PNG