如何生成自定义 SVG 占位图

先确定占位图的用途

这款工具适合在网页原型、版式草稿或内容尚未准备好时，先制作一张可替代正式图片的 SVG 占位图。你可以指定宽度、高度、显示文字、背景色和文字颜色，生成结果还会提供以内嵌 SVG 图像数据前缀开头的图像数据表示。这样既能先确认图片在版面中的位置，也能用简短标签区分不同的内容区域。

按顺序设置并生成图像

先填写宽度和高度。两项都可以不填，默认宽度为 400，高度为 300；每个数值都会分别落在 1 至 2000 的有效范围内，低于 1 的输入按 1 处理，高于 2000 的输入按 2000 处理。
输入希望显示在图中的标签，例如“产品预览”或“文章封面”。若不提供文字，标签会改用生效后的宽度和高度，并以乘号连接，因此尺寸生效为 800 和 450 时，会形成 800×450 这样的标签。
按需要填写背景色和文字颜色。未提供背景色时使用 #cccccc，未提供文字颜色时使用 #333333；填写的颜色值会用于生成的 SVG。
生成占位图后，同时查看图形本身和图像数据表示。确认尺寸、标签以及两种颜色符合当前版面，再把结果用于后续的排版或原型整理。

检查图形与文字的实际含义

查看结果时，先把图形的宽高与目标版面进行比较，再检查标签是否表达了该区域的用途。没有填写文字时，不要按空白标签判断，而应核对它是否显示为生效尺寸组成的内容。若输入值超出范围，结果采用限制后的尺寸，原来的较大或较小数值不会继续作为有效尺寸。标签文字在写入 SVG 以及图像元素的替代文字前会经过 HTML 转义，所以带有标记符号的输入应按普通显示文字来理解，而不是当作可执行或可直接插入的标记。

使用示例

网页产品卡片还没有正式图片，但版面需要一个 800×450 的预览区域来承载“产品预览”标签。

为网页产品卡片填写宽度 800、高度 450 和标签文字“产品预览”，再填写背景色与文字颜色，随后生成占位图。

结果包含一张生效尺寸为 800×450 的 SVG 占位图，并提供以内嵌 SVG 图像数据前缀开头的图像数据表示；图中标签为“产品预览”，两种颜色采用填写的值。

使用限制

宽度和高度超出 1 至 2000 时会分别被限制，输出形式是 SVG 占位图以及以内嵌 SVG 图像数据前缀开头的图像数据表示。

常见错误

把输入的超界尺寸直接当成最终尺寸，会导致预期与结果不一致；请分别按 1 至 2000 检查宽度和高度，并以生效后的数值为准。

常见问题

可以自定义占位图的尺寸吗？

可以分别填写宽度和高度；省略时分别采用 400 和 300，输入结果按各自的 1 至 2000 范围处理。

不填写标签文字时会显示什么？

如果文字为空，图中会显示生效宽度与生效高度用乘号连接后的尺寸标签，例如 800×450。

能调整背景色和文字颜色吗？

可以提供背景色和文字颜色；没有填写时，前者使用 #cccccc，后者使用 #333333。