svg實戰 - 圖片壓縮

svg一方面是「圖」，一方面又具備徹底可編程特性，這讓它在網頁開發中有很大的想象空間。除了常見的圖表、icon之類，還有其它一些好玩的地方。本文就討論一下svg圖片壓縮上的應用。常見的相關應用場景有：

• 高清矢量圖。好比logo，icon等幾何圖形或者由幾何圖形組合的複雜結構，用svg代碼文原本作，會比jpg或者png小不少。好比微軟搜索的logo，cn.bing.com/
• 動畫。能用css實現的動畫，儘可能用css來作，須要的代碼會少不少；但常常有一些css作不到的，如路徑動畫。若是用gif或者video，資源就大不少了。這時候就適合用svg來作；
• 使用svg作「裁剪路徑」，與jpeg配合實現「鏤空」效果。大部分狀況下，這種組合會比直接用png小不少。

本文的核心就是第三種方案的應用。

需求

活動需求，開發一個以下圖的功能

圖1：效果圖

每一個用戶抽獎後，能夠得到不一樣的字。彈窗就是一個可複用的組件，把通用的UI抽出來，就是

圖2：可複用UI

這個圖片的格式是PNG，大小84K。使用PNG是由於它的四個角須要鏤空。咱們的目標就是壓縮這個Png圖，好比換成jpg，就會減少不少。

優化第一波：mask-image

上面的png圖比較大，換成jpg就小不少了。同尺寸的jpg格式，肉眼幾乎看不出差別的jpg圖，大小29K，是Png的34%。不過它不支持透明，四個角無法作到鏤空的效果。

圖3：jpg版本

如上圖，jpg的四個角裁不掉。

這時候就能夠使用css屬性mask-image了，這個屬性用於設置元素上遮罩層的圖像。使用遮罩，就能夠把不須要的地方裁切掉。可是它額外須要一個遮罩圖：

圖4：遮罩圖

由於它是純色的圖，雖然是png，但它的size很小，只有3K。

代碼以下：

.dia{
	background: url(./bg.jpg);
	background-size: 100%;
	-webkit-mask-image: url(./mask.png);
	-webkit-mask-size: 100%;
	mask-image: url(./mask.png);
	mask-size: 100%;
}
複製代碼

這種解決方案，須要的資源總量爲 29+3=32k，是原始方案的 38%。 demo 源碼

優化第二波：svg介入

上面的方案已經不錯了，但另外一種更「小」的方案：用svg替代遮罩圖。svg既然是「圖片」，就能夠作一些圖片的工做。上面的mask圖，是一個特別簡單的幾何結構，能夠直接用svg替代。

mask.svg文件內容以下：

<svg viewBox="0 0 566 700">
	<path id="baseShape" fill="red" d="M25 0h516a25,25 0 0,0 25,25v650a25,25 0 0,0 -25,25h-516a25,25 0 0,0 -25,-25v-650a25,25 0 0,0 25,-25Z"></path>
</svg>
複製代碼

而後調整上面css文件的內容：

.dia{
	background: url(./bg.jpg);
	background-size: 100%;
	-webkit-mask-image: url(./mask.svg);
	-webkit-mask-size: 100%;
	mask-image: url(./mask.svg);
	mask-size: 100%;
}
複製代碼

一通操做後，就不須要mask.png這個圖片了，增長了一個100多字節的svg文件，資源又減小了些許。 demo 源碼

優化第三波：svg的直接繪製

上面即然已經用了svg，咱就把svg用到極致，連彈窗背景也直接用svg畫吧。

看圖2，背景圖輪廓、邊線，均可以使用svg直接畫出來。（固然中間一起也是能夠用svg作的，只是有些複雜）。

<svg viewBox="0 0 566 700" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<path id="baseShape" d="M25 0h516a25,25 0 0,0 25,25v650a25,25 0 0,0 -25,25h-516a25,25 0 0,0 -25,-25v-650a25,25 0 0,0 25,-25Z"></path>
	</defs>
	<use id="bg" href="#baseShape" fill="#db3e4a" />
	<use id="line" href="#baseShape" stroke="#e09b6c" fill="transparent" stroke-width="1" x="11" y="11" style="transform:scale(0.96,0.97);" />
	<image id="card" x="95" y="78" href="./card.jpg" height="382" width="420"></image>
</svg>
複製代碼

由於輪廓和邊線形狀一致，就把path抽離，作了一個可複用的組件。背景和邊線都複用了這個path。而後在上面蓋上了最小尺寸的圖。

這個方式下，最後的資源總量爲 21k。 demo 源碼

擴展

svg是能夠直接在html中用inline的方式嵌入的，這種狀況下：

• 能夠和頁面共享css
• 經過js操做dom
• 能夠直接用vue、react的庫，方便展現。