🔧

SVG 占位图

生成自定义尺寸和颜色的 SVG 占位图。

Width (px)Height (px)BackgroundText ColorCustom Text

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <rect width="100%" height="100%" fill="#cccccc"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="37.5" fill="#888888">400×300</text>
</svg>

How to Use

使用上方控件设置占位图的尺寸（宽度和高度）、背景颜色及文本内容。
实时预览 SVG 占位图效果，调整颜色、字号和文本，使其符合原型图需求。
生成并下载独立的 .svg 文件，或复制内联 SVG 标记以直接嵌入 HTML。也可将其用作 data URI，用于 img 标签或 CSS background-image 属性。

Frequently Asked Questions

为什么用 SVG 占位图而不是占位图服务？: SVG 占位图完全自包含——无需外部 HTTP 请求，无第三方依赖，且即时渲染。与 placehold.co 或 via.placeholder.com 等服务不同，SVG 占位图可离线使用，不依赖外部服务器的可用性。
SVG 占位图相比位图有哪些优势？: SVG 与分辨率无关——在视网膜屏上清晰锐利，可任意缩放而不模糊，文件体积极小（通常不足 1KB）。由于 SVG 是纯 XML，还可在任何文本编辑器中直接编辑。
这些占位图只能用于开发阶段吗？: 虽然主要面向开发和原型设计场景，SVG 占位图也完全可以用于生产环境，作为轻量级的默认图片。许多网站将其用作加载状态或后备图片。只需确保占位图设计不会让用户误以为真实内容已加载即可。