CodeToolProCodeToolProFree Online Developer Tools
GitHub

SVG Placeholder Generator

Settings

    • Preview

    400x300

    SVG Code

    • <svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <rect width="400" height="300" fill="#cccccc" />
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#666666" font-family="Arial, sans-serif" font-size="60px">400x300</text>
</svg>

    技术详情

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

    工具功能

    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 Data URI 与内嵌技术

    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。