卡卡網(wǎng)

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

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

1、減小畫(huà)布的大小

使畫(huà)布不太大但不太小有助于文件的重量，因?yàn)閿?shù)字越大，所有路徑點(diǎn)的數(shù)量就越大。太小了，你可能會(huì)得到很多小數(shù)，修剪時(shí)會(huì)扭曲圖像。如果你有一個(gè)不錯(cuò)的范圍，你的路徑點(diǎn)也會(huì)很小，不會(huì)分成小數(shù)。

Illustrator如何減小畫(huà)布的大小

要在 Illustrator 中快速更改畫(huà)板的大?。⊿VG 中的 viewBox），你可以轉(zhuǎn)到Object > Artboards > Fit to Artwork Bounds。有時(shí)你會(huì)想要更精確一點(diǎn)，在這種情況下，請(qǐng)轉(zhuǎn)到File > Document Setup > Edit Artboards。這將允許你手動(dòng)調(diào)整可見(jiàn)區(qū)域，甚至可以精確地指定你想要的單位。

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

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

Illustrator如何使用 SVG 濾鏡

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

3、 刪除多余的基礎(chǔ)（背景）圖像

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

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

可以通過(guò)使用“選擇”>“相同”>“填充顏色”（或“填充和描邊”）一次抓取后面的形狀。這使你可以一次抓取多個(gè)形狀并非常快速地將它們?nèi)縿h除。 

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

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

5、減少路徑點(diǎn)

如果你要?jiǎng)?chuàng)建手繪圖，你可以對(duì)其進(jìn)行跟蹤，在此之后你應(yīng)該使用 Object > Path > Simplify。

你需要選中允許預(yù)覽的框，因?yàn)檫@可能會(huì)破壞圖像。值得一提的是，圖像質(zhì)量下降很快，所以通常我能去掉的最多是 91% 左右。這仍然給了我很好的回報(bào)，減少了大量的路徑點(diǎn)，這也可能是完成此類(lèi)減少的最快方法。 

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: SVG