配置
SVG预览 · 640×360
SVG 代码源码
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360"> <rect width="640" height="360" fill="#667eea"/> <text x="50%" y="50%" font-family="-apple-system,system-ui,sans-serif" font-size="45" font-weight="600" fill="#ffffff" text-anchor="middle" dominant-baseline="central">640×360</text> </svg>
关于 SVG 占位图生成器
页面布局阶段往往还没有真实图片，需要一个尺寸精确、能标注分辨率的占位图来撑开版面。本工具在浏览器本地生成 SVG 占位图：你指定宽高、背景色、文字颜色和标注文案，它即时拼出一段矢量 SVG 代码，可直接内联进 HTML 或转成 Data URI。因为是矢量，放大不糊；又因为体积极小，比位图占位更省带宽。所有生成都在本机完成，不请求任何外部占位图服务。 建议在日常开发中收藏本工具，遇到相关 Web 开发需求时即可快速打开使用。所有处理均在浏览器本地完成，无需安装任何软件。
使用场景
- 布局占位 — 在卡片、轮播或网格里放入精确尺寸的占位块，先把响应式布局调通。
- 懒加载底图 — 为图片懒加载提供轻量 SVG 首屏占位，避免加载前布局跳动。
- 设计标注 — 在占位图上直接写明 800x600 等尺寸，方便和设计师对齐切图规格。
- 离线可用 — 替代依赖第三方域名的占位图链接，内网或断网环境也能正常显示。
- Data URI 内联 — 把占位图转成 Data URI 直接写进 img 或 CSS，省一次 HTTP 请求。
常见问题
为什么用 SVG 而不是 PNG 占位？
SVG 是矢量，任意尺寸都清晰、不失真，且一段几百字节的代码就能描述整张图，比同尺寸 PNG 小得多，特别适合做占位。
生成的 SVG 怎么用在页面里？
可以三种方式：直接把 SVG 代码内联进 HTML、保存为 .svg 文件用 img 引用，或转成 Data URI 写进 src 和 CSS 的 background。
占位图上的文字会自适应吗？
文字字号可随宽高比例设置，并用 text-anchor 居中。如果你的容器是响应式的，建议给 SVG 设置 100% 宽度让其等比缩放。
能批量生成多种尺寸吗？
可以逐个改尺寸生成，常用于响应式 srcset 的多分辨率占位。需要随机彩色块也可改背景色后多次生成。
Data URI 里的 SVG 要转义吗？
需要。直接放进 CSS 时应对 # 等字符做 URL 编码，或用 base64 包裹，否则部分浏览器会解析失败。本工具会输出可直接使用的形式。
有浏览器兼容性要求吗？
本工具兼容所有现代浏览器（Chrome、Firefox、Edge、Safari），无需安装任何插件或扩展。
可以离线使用吗？
首次加载后，部分功能在离线状态下仍可使用。页面资源加载后，核心逻辑完全在浏览器本地运行，不依赖网络。