SVG 占位图生成器

关于 SVG 占位图生成器

页面布局阶段往往还没有真实图片，需要一个尺寸精确、能标注分辨率的占位图来撑开版面。本工具在浏览器本地生成 SVG 占位图：你指定宽高、背景色、文字颜色和标注文案，它即时拼出一段矢量 SVG 代码，可直接内联进 HTML 或转成 Data URI。因为是矢量，放大不糊；又因为体积极小，比位图占位更省带宽。所有生成都在本机完成，不请求任何外部占位图服务。所有处理均在浏览器本地完成，无需安装任何软件，它适合在组件开发、邮件模板或落地页草稿里快速撑开图片位，比请求外部占位服务更省带宽也更可控。把生成的矢量代码内联进模板，能避免请求外部占位服务带来的延迟与失效风险；标注真实尺寸后，组件开发阶段就能确认图片位是否撑开到位，等比放大也不会模糊，比位图占位更省带宽且结果更可控。

尺寸精度是这类素材最核心的价值，也是最容易用错的地方。占位图的意义在于「撑开并标注真实的版面尺寸」，因此宽高必须与最终素材一致；若占位尺寸与真实素材不同，用它调试出的版式在替换后会全部错位，反而制造了问题。使用前应确认尺寸来源是设计稿而不是随手填写。

与「用纯色块或边框占位」相比，带标注的占位图优势在于可沟通：尺寸与文案直接显示在图上，评审时不必反复核对文档。代价是它在正式上线后会显得内容未完成，因此必须作为开发期产物管理，并在发布前替换，替换清单应写进发布检查项而不是靠人记。

矢量格式带来的另一个特点是体积极小且可无损缩放，因此很适合网络较慢的环境与移动端调试。但要注意它只在矢量形式下保持清晰，一旦被截图或导出为位图再放大，同样会模糊，所以在文档与设计稿里引用时应保留原始矢量文件。

文案标注的内容也需要约定。占位文字若写「banner」，评审者只能知道用途；若写上预期字数与用途，例如「标题，约十二字」，则能在排版阶段就验证换行与截断行为。占用极少的额外成本，却能让版式验证提早一个环节。

最后，颜色选择上建议使用明显不同于真实设计的色调（例如浅灰底加深灰字），避免被人误当成最终视觉；同时保持足够的文字对比度，确保在投影与截图里都能看清标注内容，否则占位图反而成了评审时的干扰。

与纯样式占位方案相比，独立文件的形式有明确的适用边界。用样式表直接画一个带尺寸的方块在开发期更轻，不需要额外请求，也不需要管理文件；但当占位需要标注尺寸与文案、或需要交付给设计与其他同事时，独立文件能自解释，不依赖对方读样式。因此协作场景选文件，自用调试选样式。

无障碍标注在占位素材上同样适用。占位图若带有说明性文字，应当给图形元素加上可访问名称或标题描述，使屏幕阅读器能读出「某某尺寸的占位」而不是把它当作无意义图片跳过。这一点在使用占位图的临时页面上尤其容易被忽略，却直接影响页面在评审时能否被无障碍工具正确解读。