卡卡網(wǎng)

完成了一個SVG項目，上線后由于流量增大，導致網(wǎng)頁加載時間是否緩慢，大概需要10秒，這可不得了，一定要優(yōu)化，至少要優(yōu)化到3、4秒以內，否則項目不能用下去。經(jīng)過努力，從多方面入手優(yōu)化SVG性能，最終把網(wǎng)頁加載時間提高到了2秒，不用再擔心項目使用困難的問題了。其實優(yōu)化SVG性能，主要是如何去減小它的體積，今天我把幾個技巧給大家介紹一下，也算是一個經(jīng)驗的分享吧。

注意：我使用 Illustrator 創(chuàng)建和優(yōu)化我的 SVG，對于下面的示例，我將使用 Illustrator。

1、減小畫布的大小

使畫布不太大但不太小有助于文件的重量，因為數(shù)字越大，所有路徑點的數(shù)量就越大。太小了，你可能會得到很多小數(shù)，修剪時會扭曲圖像。如果你有一個不錯的范圍，你的路徑點也會很小，不會分成小數(shù)。

Illustrator如何減小畫布的大小

要在 Illustrator 中快速更改畫板的大小（SVG 中的 viewBox），你可以轉到Object > Artboards > Fit to Artwork Bounds。有時你會想要更精確一點，在這種情況下，請轉到File > Document Setup > Edit Artboards。這將允許你手動調整可見區(qū)域，甚至可以精確地指定你想要的單位。

2、使用 SVG 濾鏡代替外觀效果

有幾次在使用另一位設計師的 SVG 時，我們發(fā)現(xiàn)使用外觀面板中的效果（例如投影）會生成一個龐大的 base64 文件，既麻煩又昂貴。這個問題可以通過使用 SVG 過濾器來解決。

Illustrator如何使用 SVG 濾鏡

在 效果 > SVG 過濾器中可用，然后從下拉列表中選擇一個。值得一提的是，只有當文件為 .ai 格式時，你才可以使用這些文件，而不是在文件為 .svg 格式時才可用（這就是為什么我建議始終保留 .ai 源文件的原因）。通過交換這些，我們不僅改善了 SVG 的外觀，而且我們將文件大小從驚人的1.8MB 減少到了 1.2KB！

3、 刪除多余的基礎（背景）圖像

在描摹圖像時，通常會給你一個帶有圖案的圖像或背景“頂部”的多個圖像。但 Illustrator 不會將這些形狀理解為圖案下方的一個大形狀或許多其他形狀 - 它會將基礎顏色分解為圖案之間的形狀。

你可以刪除所有這些形狀并將其替換為一個大背景圖像。請記住使該層與其他所有層的顏色不同。

可以通過使用“選擇”>“相同”>“填充顏色”（或“填充和描邊”）一次抓取后面的形狀。這使你可以一次抓取多個形狀并非?？焖俚貙⑺鼈內縿h除。 

4、導出，然后優(yōu)化

使用 Illustrator， SVG 的導出可以進行優(yōu)化。使用 Export As > SVG 而不是 Save As > SVG 以獲得更好的效果。

5、減少路徑點

如果你要創(chuàng)建手繪圖，你可以對其進行跟蹤，在此之后你應該使用 Object > Path > Simplify。

你需要選中允許預覽的框，因為這可能會破壞圖像。值得一提的是，圖像質量下降很快，所以通常我能去掉的最多是 91% 左右。這仍然給了我很好的回報，減少了大量的路徑點，這也可能是完成此類減少的最快方法。 

總結

本文介紹了減小SVG體積的5個技巧，通過減少SVG文件大小，SVG性能得以大大提高，最終網(wǎng)頁加載時間減少幾倍，達到我們優(yōu)化的目的。 

相關文章

• 詳細介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動畫
• [實例]純 CSS SVG 畫圓/圓環(huán)/圓弧動畫
• 比較和了解何時使用SVG與何時使用Canvas
• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區(qū)別比較表
• SVG 與 Canvas 的五大區(qū)別
• SVG圖片對比PNG、JPEG的5大優(yōu)點
• svg circle stroke屬性設置實線邊框/虛線邊框/無邊框
• CSS+SVG：畫圓并且文字寫在圓中間
• CSS+SVG實現(xiàn)環(huán)形/圓環(huán)文字效果【簡單實例】
• 純CSS實現(xiàn)環(huán)形文字效果
• 用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡單實用】

標簽: SVG