SVG占位图

分类:图片工具
SVG占位图工具,提供了生成SVG占位图的功能,本工具支持自定义SVG图片的尺寸、文本以及前(背)景色,生成的SVG占位图可通过URL直接引用,也可以把SVG保存到本地供其他场景使用。本工具是一款方便的、高效的占位图生成工具,可用于原型设计、PPT演示文档、产品说明及其他需要用到占位图的场合。

图片预览


这是 SVG 图片的直接访问链接
这是包含了 SVG 图片的 img 标签,可嵌入 HTML 中使用
px
图片宽度应介于80-1600之间
px
图片高度应介于80-1600之间
px
文字大小应介于16-72之间
文字内容不要超过10个字
请输入16进制颜色值
请输入16进制颜色值
工具介绍

概述

占位,在英文中叫 PlaceHolder,通常应用在不需要填充实际内容但要保留其位置的场景,比如:文本占位符、图片占位符。本工具提供了占位图片生成的功能,所生成的占位图为 SVG 格式,SVG 生成的过程在客户端(浏览器)中完成,速度极快,故本工具也称为SVG占位图工具。

占位图主要用在网页(APP)原型设计、PPT演示、操作说明等场景,传达的意思是:该地方会放置一张什么样的图片,尺寸是 xxx 像素。在上述场景中,使用占位图,可避免每次都要去找图片带来的时间成本。

SVG 图片占位符
SVG 图片占位符

SVG 格式的占位图,相比一张实际的图片(.gif / .jpg / .png 等)而言,其优势在于:

  1. SVG 图片体积非常小,应用在网页中时,有更快的加载速度(如果需要对 SVG 图片进行优化,推荐使用本站另一款工具:SVG图片优化
  2. 因为 SVG 是一种矢量图格式,因此,无论如何放大缩小,图片都不会失真

如何使用占位图

本工具生成的结果,提供了 SVG 图片访问 URL 以及对应的 img 标签两种形式。其中,SVG 图片 URL 可直接在浏览器中打开;img 标签,可以嵌入 HTML 代码中使用。

例如:

  • 图片URL:https://www.dute.org/placeholder/800x240
  • img 标签:<img src="https://www.dute.org/placeholder/800x240" width="800" height="240">

当然,你也可以自行构造 SVG 占位图的 URL,完整的 URL 格式为:

https://www.dute.org/placeholder/{widht}x{height}?fontsize={fontsize}&text={text}&forecolor={forecolor}&bgcolor={bgcolor}

上面 URL 中大括号 {} 中参数是需要替换的内容,除了 widthheight 为必须的参数,其余参与可省略(每种参数的含义,请参考下面的选项说明)。

除了通过引用图片 URL 或嵌入 img 标签来使用,本工具还提供了保存至本地的功能,可以把 SVG 图片下载到本机电脑,以供其他场合使用。

选项说明

本工具提供了若干选项,以支持生成不同尺寸、不同内容以及不同样式(前景色、背景色)的占位图,这些选项包括:

1、图片宽度

对应的参数为 width,必填,表示生成的 SVG 图片的宽度,最大可支持 1600px,默认为 800px

2、图片高度

对应的参数为 height,必填,表示生成的 SVG 图片的高度,最大可支持 1600px。默认为 240px

3、文字大小

对应的参数为 fontsize,表示占位图上显示的文字的大小,可以不填,默认为 64px

4、文字内容

对应的参数为 text,表示占位图上显示的文本内容。该选项可为空,这种情况,将以 宽度x高度 作为显示文本。

5、文字颜色

对应的参数为 forecolor,表示占位图上显示的文本的颜色,要求是十六进制的颜色值,可以不填,默认为 #FFFFFF

6、背景颜色

对应的参数为 bgcolor,表示占位图的背景色,要求是十六进制的颜色值,可以不填,默认为 #DDDDDD

请根据需要,调整上述参数,以符合你实际的需求。