占位图生成
输入宽高、文字与配色，实时生成内嵌 SVG 占位图；可复制 SVG 源码或 Data URI，写原型、做测试图很省事。
>_ 使用指南 · GUIDE
输入宽、高、文字与配色，占位图会实时渲染成一张内嵌 SVG；你可以直接复制 SVG 源码，也可以复制 Data URI 形式，写原型、做测试图、搭页面骨架时随手取用，不用再满网找图床或下载图片。
占位图用于「还没有真实图」的开发阶段：页面布局要定、接口要联调、Demo 要演示，但图片素材未到位。与其放一堆破图或空白，不如用一张带尺寸标注和说明文字的占位图，清楚又体面。
常见用法：
- 定尺寸：按实际需要填宽高（如 800×450），预览立刻更新
- 写文字：填入说明文字，图片上直接显示，标清这块区域的用途
- 调配色：换文字与背景颜色，让占位图贴合整体风格
- 取用：复制 SVG 源码内嵌，或复制 Data URI 直接放进
src/ CSS 背景
生成完全在浏览器本地完成，不依赖任何外部图床，不产生网络请求，离线也能用。
>_ 常见问题 · FAQ
Q1 · 占位图是做什么用的？谁需要它？
占位图给「图还没到位」的阶段用：前端写页面骨架、做响应式布局预览、搭 Demo 演示、联调接口时，用一张带尺寸与文字的占位图占住位置，布局不塌、观感清爽。等真实图素材就绪后，把占位图替换成正式图片即可。
Q2 · SVG 占位图和 PNG/JPG 占位图有什么区别？
SVG 是矢量、纯文本，体积极小、任意缩放不糊，还能直接内嵌在 HTML 里、作为 CSS 背景或写进代码；PNG/JPG 是位图。对「本地生成、网页内使用」的场景，SVG 更轻更灵活，也是本工具默认输出的原因。
Q3 · 复制出来的 Data URI 怎么用？
Data URI 是一种把图片内容编码进 URL 的写法（data:image/svg+xml,...），可直接放进 <img src="..."> 或 CSS 的 background-image: url(...)，无需单独存放图片文件。适合原型与测试；生产环境若图片较多，仍建议改用真实文件路径以利缓存。
Q4 · 占位图会调用外部服务或上传数据吗？
不会。本工具在浏览器本地实时生成 SVG，不请求任何外部图床、不上传任何数据，纯本地计算，离线也能正常生成。相比依赖第三方占位图服务的方案，它更快、更私密、无外部依赖失效风险。
Q5 · 生成后文字或颜色不是我想要的，能改吗？
能。文字、尺寸、前景色与背景色都是输入项，改动即实时重新渲染，无需刷新或等待。把它理解成一个「所见即所得的 SVG 生成器」，调好满意再复制输出即可。