开发工具 125文本工具 40编码加密 40图片文件 66查询工具 46计算转换 57站长工具 57生活工具 55娱乐工具 39金融理财 45
首页/编码加密/占位图生成器(SVG)

占位图生成器(SVG)

做页面骨架、等设计稿时用来占位。指定宽高生成带对角线和尺寸标注的 SVG,矢量格式放多大都不模糊,源码只有几百字节,比找 PNG 占位图方便。

本地运行 · 数据不上传 编码加密 免费 · 无需注册
支持 #rrggbb 或颜色名
占位图 SVG 源码
点上方「生成」按钮开始

使用说明

  1. 填宽度和高度,点「生成」。
  2. 想显示自定义文字就填在「显示文字」里,留空则显示尺寸。
  3. 复制结果存成 .svg,或者直接作为 data URI 塞进 img 标签。
  4. 灰色底加对角线的样式是业界通用的占位惯例,一看就知道这里还没填内容。

常见问题

为什么用 SVG 而不是 PNG?
矢量图可以任意缩放不失真,源码可读可改,文件也小得多。需要位图时在浏览器里截图即可。
怎么在 HTML 里直接用?
把 SVG 源码里的双引号换成单引号,前面拼上 `data:image/svg+xml;utf8,` 就能塞进 img 的 src。
能做成半透明吗?
可以改源码里 rect 的 fill,加上 fill-opacity 属性即可。

相关工具

编码加密 · 该分类共 40 个工具,展开查看全部