SVG 占位图生成器

SVG 占位图生成器的工作原理

工具功能

SVG 占位图生成器可创建轻量级的矢量占位图，支持自定义尺寸、背景颜色、文字叠加和字体设置。它直接输出 SVG 标记，并提供可嵌入 HTML 或 CSS 的 Base64 data URI。由于 SVG 与分辨率无关且通常小于 1KB，这些占位图无需网络请求即可瞬间加载。

常见开发者使用场景

前端开发者在原型阶段会使用 SVG 占位图，在真实图片尚未就绪前预留布局空间，避免累积布局偏移（CLS）。它们在设计系统中也很有用，例如头像兜底、缩略图骨架屏以及响应式图片容器。邮件开发者会在 HTML 模板中嵌入 data URI 占位图，以应对邮件客户端可能阻止外部图片加载的情况。

数据格式、类型或变体

输出为标准的 SVG 1.1 文档，包含一个填充矩形和一个居中的文本元素。data URI 变体将该 SVG 编码为 Base64 字符串，并以 'data:image/svg+xml;base64,' 作为前缀，可直接用于 img 的 src 属性、CSS 的 background-image 属性或内联 HTML。尺寸以像素指定，但由于 SVG 是矢量格式，它可缩放到任意容器大小而不会出现像素化。

常见陷阱与边界情况

浏览器不会将 Data URI 独立于其所嵌入的文档进行缓存，因此在许多页面中复用同一个占位图，相比使用一个可缓存的外部文件，会增加总体传输体积。若尺寸较小，过长的文本标签可能会溢出 SVG 的 viewBox。一些较旧的邮件客户端不支持 SVG Data URI，会回退为损坏的图片图标。若 CSP（内容安全策略）头的 img-src 未包含 'data:'，可能会阻止内联 Data URI。

何时使用此工具而非代码

在进行线框图或原型设计时，使用此浏览器工具可快速生成一次性的占位图片，而无需添加构建依赖。若要在生产环境中进行动态占位图生成（例如用户上传图片的兜底方案），请使用服务端 SVG 模板渲染或使用与图片优化流水线集成的专用服务（如 plaiceholder），它们还能基于真实图片生成模糊的低质量图片占位符（LQIP）。