SVG Placeholder Generator

SVG 占位符生成器可创建用于开发布局时的 SVG 占位图，无需依赖外部图片资源。工具生成纯矢量 SVG 图像——你可以自定义宽度、高度、背景色、文字内容和文字颜色。生成的占位图可以显示尺寸信息（如 "800×400"），颜色可自定义或使用随机配色。由于 SVG 是纯文本格式，可以直接嵌入 HTML 作为 data URI 或内联标签使用。与传统的 placeholder.com 等外部服务不同，这些 SVG 完全离线可用且零依赖。

SVG 占位图在前端开发中有独特优势。在布局开发阶段，图片素材尚未准备好时，用 SVG 占位图代替真实图片——它们可以精确匹配目标尺寸。创建组件文档（Storybook/Styleguide）时，用 SVG 占位图展示图片组件的各种尺寸变体。响应式开发中，SVG 占位图天然支持任意缩放而不失真。电子邮件模板开发中，许多邮件客户端屏蔽外部图片加载，内联 SVG (部分邮件客户端支持) 可以在不依赖外部资源的情况下展示布局。性能基准测试中，SVG 占位图作为标准化的图片模拟负载。

配合 CSS 三角形生成器 创建更多装饰图形，或使用 SVG 转 PNG 将生成的 SVG 转换为位图格式。

SVG 占位图的三种使用方式：

• 内嵌 SVG：直接将 <svg> 标签写在 HTML 中，完全可控、无需额外 HTTP 请求、可被 CSS 样式化
• Data URI：data:image/svg+xml;utf8,<svg>...</svg> 格式，可以放在 <img> 的 src 属性或 CSS background-image 中使用
• Base64 Data URI：data:image/svg+xml;base64,... 格式，编码后的 SVG 体积更大但兼容性最好
• 优势对比：相比外部占位图服务，SVG 占位图加载速度极快（0 网络请求）、隐私安全（用户数据不会发给第三方）、完全可控

• Data URI 长度：IE 浏览器下 Data URI 长度限制为 32KB，超过后图片不显示。现代浏览器无此限制但超长 data URI 会影响 DOM 可读性。
• 特殊字符转义：SVG 中的 # 颜色值在 Data URI 中需要转义为 %23，# 被浏览器解释为 fragment 标识符。建议使用 Base64 编码解决此问题。
• 缓存：内嵌在 HTML 中的 SVG 无法被浏览器单独缓存——每个页面都重复传输相同的 SVG 数据。对于重复使用的占位图，考虑作为独立的 .svg 文件。
• 不支持 SVG 的邮件客户端：Outlook（桌面版，非新版）对 SVG 的支持有限，邮件模板中需要提供 PNG 后备方案。

在快速填充布局、编写组件文档、或在禁网环境中开发时使用此工具。对于需要数百张不同尺寸占位图的自动生成，推荐使用 placeholder.js、holder.js 或直接用 JavaScript 动态生成 SVG。