SVG 占位图生成器

Data URI 不需要网络请求

占位图服务在出问题之前一直都很方便：直到域名开始限流、公司代理把它拦了、你在飞机上演示，或者服务悄悄改了输出格式导致你一半的原型图错位。所有这些故障的根源都是同一个——占位图存在别人的服务器上。

SVG Data URI 没有这种依赖。整张图就是一段写在标记里的字符串，因此它在离线状态、邮件客户端、静态导出文件以及三年后的截图里都会渲染成完全一样的样子。它在延迟上也不花任何代价：没有 DNS 查询、没有建连、没有往返。开发时一个页面上放二十张占位图，这个差别相当明显。

用 URL 编码而不是 base64

本工具输出的 Data URI 使用百分号编码而非 base64。两者都合法，但对 SVG 来说百分号编码是更好的默认选择，原因有二。

第一是体积。base64 会把数据膨胀约三分之一，而百分号编码只会展开那少数真正需要转义的字符——SVG 基本都是纯 ASCII，所以结果通常反而更短。第二是可读性：你在样式表里看到一段百分号编码的 SVG，仍然能认出它是什么，能顺手改个颜色，能一眼看出拼写错误。而 base64 数据块必须先解码才有意义。

百分号编码唯一需要小心的是单引号，这也是本工具专门对它做转义的原因：CSS 的 url() 值通常用单引号包裹，SVG 内部一个未转义的撇号会让这个值提前结束。

尺寸、缩放和 viewBox

生成的 SVG 同时带有显式的 width、height 属性和与之匹配的 viewBox。这个组合是有意为之。width 和 height 给浏览器提供固有尺寸，避免图片布局前发生跳动；viewBox 则让同一张图能在 CSS 里干净地缩放到任意大小。

因为是矢量图，文字在任何缩放比例下都保持锐利——高分屏上不会糊，也不需要另外准备 2x 素材。如果希望占位图撑满容器，在 CSS 里设置 width: 100%; height: auto，viewBox 会自动保持宽高比。如果希望无视宽高比固定成一个方框，保留生成的属性即可，浏览器会照做。