配置
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="#0d9488"/> <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。因为是矢量，放大不糊；又因为体积极小，比位图占位更省带宽。所有生成都在本机完成，不请求任何外部占位图服务。所有处理均在浏览器本地完成，无需安装任何软件，它适合在组件开发、邮件模板或落地页草稿里快速撑开图片位，比请求外部占位服务更省带宽也更可控。把生成的矢量代码内联进模板，能避免请求外部占位服务带来的延迟与失效风险；标注真实尺寸后，组件开发阶段就能确认图片位是否撑开到位，等比放大也不会模糊，比位图占位更省带宽且结果更可控。
使用方法
- 打开「SVG 占位图生成器」
- 输入或粘贴待处理的内容
- 根据需要调整输出选项
- 点击「运行」按钮，结果实时显示
- 复制或导出结果
使用场景
- 布局占位 — 在卡片、轮播或网格里放入精确尺寸的占位块，先把响应式布局调通。
- 懒加载底图 — 为图片懒加载提供轻量 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 包裹，否则部分浏览器会解析失败。本工具会输出可直接使用的形式。
广告