Towalles Towalles

SVG 占位图生成器

设置宽高、背景色、文字色与标签; 即时生成 SVG 占位图并复制源码或 Data URL。适合线框图、懒加载占位与前端原型。

阅读完整指南: EXIF元数据隐私保护指南：GPS与敏感信息处理实战 →

隐私提示：本地解析，不上传服务器。

↓ 在下方输入区粘贴内容，结果会立即显示

自定义宽高、颜色与文字; 生成 SVG 占位图用于原型与 mock。

宽度 (px)
高度 (px)
显示文字
背景色
文字色
预览

SVG 源码

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <rect width="100%" height="100%" fill="#1e2230"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#94a3b8" font-family="system-ui,sans-serif" font-size="37.5">400×300</text>
</svg>

注释说明

说明

SVG 在浏览器本地生成; 可复制源码或 Data URL 嵌入 HTML/CSS。

设置宽高、背景色、文字色与标签; 即时生成 SVG 占位图并复制源码或 Data URL。适合线框图、懒加载占位与前端原型。

快速开始

  1. 设置尺寸

    1–4096 px。

  2. 复制 SVG

    复制源码嵌入 HTML 或使用 Data URL。

功能与使用场景

生成指定宽高的 SVG 占位图，可自定义背景色与文字，矢量格式任意缩放不失真。

原型设计/mockup、Storybook 占位、懒加载图片前的 lightweight 占位、邮件模板预览时使用。

本地生成

纯字符串拼接; 无服务器请求。

示例

默认

Input

400×300

Output

SVG with size label

FAQ

支持渐变吗？

当前为纯色背景; 可复制后手动编辑 SVG。

会上传吗？

不会。

如何修改生成的 SVG 占位图尺寸？

两种方法：1) 在工具中直接调整宽高数值重新生成；2) 复制现有代码后手动修改 width/height 属性（单位为像素）或 viewBox 值（格式为 '0 0 [width] [height]'）。建议优先使用 viewBox 配合 CSS 控制显示尺寸，这样不会扭曲图形比例。