概述
占位,在英文中叫 PlaceHolder,通常應(yīng)用在不需要填充實(shí)際內(nèi)容但要保留其位置的場(chǎng)景,比如:文本占位符、圖片占位符。本工具提供了占位圖片生成的功能,所生成的占位圖為 SVG 格式,SVG 生成的過(guò)程在客戶端(瀏覽器)中完成,速度極快,故本工具也稱為SVG占位圖工具。
占位圖主要用在網(wǎng)頁(yè)(APP)原型設(shè)計(jì)、PPT演示、操作說(shuō)明等場(chǎng)景,傳達(dá)的意思是:該地方會(huì)放置一張什么樣的圖片,尺寸是 xxx 像素。在上述場(chǎng)景中,使用占位圖,可避免每次都要去找圖片帶來(lái)的時(shí)間成本。
SVG 格式的占位圖,相比一張實(shí)際的圖片(.gif / .jpg / .png 等)而言,其優(yōu)勢(shì)在于:
- SVG 圖片體積非常小,應(yīng)用在網(wǎng)頁(yè)中時(shí),有更快的加載速度(如果需要對(duì) SVG 圖片進(jìn)行優(yōu)化,推薦使用本站另一款工具:SVG圖片優(yōu)化)
- 因?yàn)?SVG 是一種矢量圖格式,因此,無(wú)論如何放大縮小,圖片都不會(huì)失真
如何使用占位圖
本工具生成的結(jié)果,提供了 SVG 圖片訪問(wèn) URL 以及對(duì)應(yīng)的 img 標(biāo)簽兩種形式。其中,SVG 圖片 URL 可直接在瀏覽器中打開;img 標(biāo)簽,可以嵌入 HTML 代碼中使用。
例如:
- 圖片URL:./placeholder/800x240
- img 標(biāo)簽:<img src="./placeholder/800x240" width="800" height="240">
當(dāng)然,你也可以自行構(gòu)造 SVG 占位圖的 URL,完整的 URL 格式為:
/placeholder/{widht}x{height}?fontsize={fontsize}&text={text}&forecolor={forecolor}&bgcolor={bgcolor}
上面 URL 中大括號(hào) {} 中參數(shù)是需要替換的內(nèi)容,除了 width 和 height 為必須的參數(shù),其余參與可省略(每種參數(shù)的含義,請(qǐng)參考下面的選項(xiàng)說(shuō)明)。
除了通過(guò)引用圖片 URL 或嵌入 img 標(biāo)簽來(lái)使用,本工具還提供了保存至本地的功能,可以把 SVG 圖片下載到本機(jī)電腦,以供其他場(chǎng)合使用。
注:本站還提供了圖片占位符工具,所生成的占位圖為
png格式,比 SVG 占位圖有更好的瀏覽器兼容性。
選項(xiàng)說(shuō)明
本工具提供了若干選項(xiàng),以支持生成不同尺寸、不同內(nèi)容以及不同樣式(前景色、背景色)的占位圖,這些選項(xiàng)包括:
1、圖片寬度
對(duì)應(yīng)的參數(shù)為 width,必填,表示生成的 SVG 圖片的寬度,最大可支持 1600px,默認(rèn)為 800px。
2、圖片高度
對(duì)應(yīng)的參數(shù)為 height,必填,表示生成的 SVG 圖片的高度,最大可支持 1600px。默認(rèn)為 240px。
3、文字大小
對(duì)應(yīng)的參數(shù)為 fontsize,表示占位圖上顯示的文字的大小,可以不填,默認(rèn)為 64px。
4、文字內(nèi)容
對(duì)應(yīng)的參數(shù)為 text,表示占位圖上顯示的文本內(nèi)容。該選項(xiàng)可為空,這種情況,將以 寬度x高度 作為顯示文本。
5、文字顏色
對(duì)應(yīng)的參數(shù)為 forecolor,表示占位圖上顯示的文本的顏色,要求是十六進(jìn)制的顏色值,可以不填,默認(rèn)為 #FFFFFF
6、背景顏色
對(duì)應(yīng)的參數(shù)為 bgcolor,表示占位圖的背景色,要求是十六進(jìn)制的顏色值,可以不填,默認(rèn)為 #DDDDDD
請(qǐng)根據(jù)需要,調(diào)整上述參數(shù),以符合你實(shí)際的需求。