<img src> 或 CSS background 使用，无需任何服务器或图床。占位图生成器 在浏览器本地生成自定义尺寸、配色、文字的占位图（placeholder image），可导出 SVG / PNG，或一键复制 data URI、<img> 标签直接使用。全程不上传、不联网、不依赖图床。
三种输出，各有用途
| 输出 | 形态 | 适合 |
|---|---|---|
| 下载 SVG | 矢量文件 | 项目里放静态占位资源，体积小、可缩放 |
| 下载 PNG | 位图文件 | 上传到不支持 SVG 的平台 |
| 复制 data URI | 自包含字符串 | 直接塞进 <img src> 或 CSS，无需文件、无需服务器 |
复制 <img> 标签 | 完整 HTML | 粘进页面即用，已带宽高属性 |
为什么不需要图床
传统的在线占位图服务（如 via.placeholder.com/300x200）是后端按 URL 参数动态画图返回，必须联网、依赖对方服务器。本工具换了思路：在你本地把图画好，输出成 data URI——这串字符本身就是完整图片，浏览器直接解析，因此：
- 不发任何网络请求，适合内网 / 离线开发
- 不怕第三方服务挂掉或限流
- 不泄露你正在开发的页面尺寸信息
SVG 占位图的优势
- 体积极小（通常几百字节），内联进代码也不臃肿
- 矢量，任意分辨率清晰
- 纯文本，可被 CSS、构建工具进一步处理
📍使用场景
- 前端开发占位接口图片还没好时，先用固定尺寸占位图撑住布局，避免页面塌陷。
- 设计稿 / 原型给原型图、PPT、文档里的图片区域放标注了尺寸的占位块。
- 广告位 / Banner 草图按 728×90、300×250 等标准广告尺寸生成示意图，确认版位再换素材。
❓常见问题
占位图需要图床或服务器吗？
不需要。本工具在浏览器本地用 SVG 直接生成图片，不上传、不联网。导出的 data URI 是自包含的，可直接粘进 HTML 或 CSS 使用，不依赖任何图床。这和 placeholder.com 那种"靠服务器按 URL 动态返回图片"的方案完全不同。
data URI 怎么用？
复制出来的 data URI 形如 data:image/svg+xml,...，可以直接当作图片地址：HTML 里写 <img src="data:image/svg+xml,...">，CSS 里写 background: url("data:image/svg+xml,...")。浏览器会直接解析，无需任何网络请求。
SVG 和 PNG 该选哪个？
SVG 是矢量，体积通常只有几百字节，任意放大不糊，可内联进代码、可被 CSS 改色，做占位图首选；PNG 是位图，适合需要上传到不支持 SVG 的平台、或要求固定像素的场景。两者本工具都能一键导出。
文字框里留空会怎样？
留空时自动显示当前尺寸（如 600×400），这是占位图最常见的标注方式。你也可以填任意文字，比如「Logo」「Banner」「广告位」。字号默认按图片尺寸自动适配，也可关掉自动手动调。
内置的尺寸预设是什么？
内置了常用版位：横幅 728×90、中矩形 300×250、大矩形 336×280、摩天楼 160×600、方形 600×600、16:9 1280×720、OG 封面 1200×630、头像 256×256。这些是常见起点，具体平台规格请以对方文档为准。
生成的图片可以商用吗？
占位图是你输入的尺寸、颜色、文字纯程序生成的，不含任何第三方版权素材，可自由使用。它的用途是开发和设计阶段临时占位，正式上线前请替换成真实素材。