正在加载，请稍候…

SVG 占位符生成器

在线 SVG 占位图生成器，支持自定义宽高、背景色、文字内容和字体大小，即时生成轻量级 SVG 占位图，可直接复制 SVG 代码或 Data URI，适合原型设计和 UI 布局调试。

使用方法

  1. 步骤 1：设置占位图的宽度和高度。
  2. 步骤 2：选择背景色和文字颜色。
  3. 步骤 3：可选自定义标签文字。
  4. 步骤 4：复制 SVG 代码或 data URL 用于项目中。

常见问题

什么是 SVG 占位图？

SVG 占位图是一种轻量向量图像，用于开发阶段在实际图像加载前预留空间。

可以在生产环境使用吗？

SVG 占位图主要用于开发，可在生产环境作为 fallback 或骨架屏使用。

SVG 占位图和 CSS 骨架屏有什么区别？

SVG 占位图是一个实际的图片元素，使用 SVG 格式显示指定尺寸的带文字的色块，通常用作图片加载失败时的替代（fallback）。CSS 骨架屏使用动画效果（如灰色渐变波纹）模拟内容加载中的状态，是一种更现代的 UX 占位方式，但需要额外的 HTML/CSS 代码。

SVG 占位图相比 PNG/JPEG 占位图有哪些优势？

SVG 占位图的优势：体积极小（通常小于 1KB，PNG 可能几十 KB）；矢量格式，任意尺寸显示清晰，无需多种分辨率版本；可直接嵌入 HTML/CSS 的 data URI，减少 HTTP 请求；可自定义颜色、文字、尺寸且无需重新生成；配合 img 的 width/height 属性可防止布局偏移（CLS），提升 Core Web Vitals 指标。