卡卡網(wǎng)

前面文章介紹過(guò)Illustrator減小SVG體積的5個(gè)技巧，使網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒。今天我將介紹另一個(gè)軟件，Inkscape，使用Inkscape優(yōu)化SVG，最終能把文件從1600kb減到16kb。

下面是3個(gè)操作步驟。

1、在Inkscape跟蹤簡(jiǎn)單線(xiàn)條圖

要在 Inkscape 中跟蹤簡(jiǎn)單的線(xiàn)條圖，請(qǐng)使用這些設(shè)置。

 2、刪除光柵圖像

單擊應(yīng)用后，你需要?jiǎng)h除現(xiàn)在位于跟蹤下的光柵圖像。如果你不這樣做，那么這將大大增加文件大小。

在對(duì)象面板中（通過(guò)單擊對(duì)象 > 對(duì)象啟用），選擇圖像并將其刪除。 

3、優(yōu)化 SVG 輸出

要在沒(méi)有 Inkscape XML 的情況下保存 SVG，請(qǐng)執(zhí)行 File > Save As，為你的文件命名。在文件類(lèi)型下拉列表中選擇“優(yōu)化的 SVG”。

如下所示設(shè)置優(yōu)化的 SVG 輸出選項(xiàng)，然后點(diǎn)擊確定。這將刪除所有 Inkscape 特定的 XML，并且還有助于保持文件大小更小。完成的文件大小約為 48kb 。

如果你簡(jiǎn)化路徑，你還可以獲得更小的文件大小 - 在 Preferences > Behavior 中，將 Simplification Threshold 設(shè)置為 0.0002。然后選擇跟蹤的對(duì)象并執(zhí)行 路徑 > 簡(jiǎn)化。當(dāng)我嘗試這個(gè)時(shí)，我能夠?qū)?yōu)化的 SVG 降低到大約 16kb。

結(jié)論

本文介紹了使用Inkscape優(yōu)化SVG的方法，減少了SVG體積，就能夠降低網(wǎng)頁(yè)加載時(shí)間，如使用Illustrator減小SVG體積，網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒，所以我們應(yīng)盡量把體積較大的SVG文件體積減少。

相關(guān)文章

• 減小SVG體積的5個(gè)技巧，網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒
• 詳細(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í)線(xiàn)邊框/虛線(xiàn)邊框/無(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  Inkscape