《SVG 動畫開發實戰》 - 🚀 SVG 文件優化

時間 2021-01-02

標籤 html git github segmentfault 微信 app svg 工具優化動畫欄目 HTML 简体版

原文原文鏈接

🚀 SVG 文件優化

通常咱們使用 AI、Sketch 等矢量圖設計工具導出的 SVG 文件代碼相對仍是比較「臃腫」的，實際在 Web 頁面上使用 SVG 時候，有些標籤或者屬性是不須要的。好比 title / desc 標籤、或者version 屬性聲明。html

咱們能夠藉助優化工具來簡化 SVG 文件大小，而且保持 SVG 原有輸出的矢量內容。git

工具

SVG 的優化經常使用手段是使用工具 svgo ，svgo 是一個運行在 Node.js 下的優化 SVG 文件的命令行工具。咱們也可使用基於 svgo 而衍生的一些工具，好比：github

Web 應用： SVGOMG
Sketch 插件： svgo-compressor
張鑫旭開發的小工具： SVG在線壓縮合並工具

Web 應用優化

優化前

好比下面是設計師童鞋使用 Sketch 輸出的一個 Icon。代碼以下：segmentfault

優化後

下面使用 SVGOMG 工具進行優化，能夠看到優化後的文件僅僅佔有源文件的 37.74% 體積大小微信

再看下優化後的 SVG 代碼文件app

一些無用的標籤以及屬性已經去掉了，保持了 SVG 文件的簡潔性，svgo 提供了一些列可配置的選項，方便控制哪些屬性/標籤會被移除。svg

Sketch 輸出優化

若是開發者是和 UI 童鞋合做的化，建議把 Sketch 插件 svgo-compressor 推薦給 UI 童鞋，這樣咱們拿到的 SVG 文件就是優化事後的了。工具

優化前

如上一章節，不管是拷貝 SVG 代碼仍是導出 SVG 文件，優化前的圖形代碼以下：優化

<?xml version="1.0" encoding="UTF-8"?>
<svg width="960px" height="160px" viewBox="0 0 960 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>shape page</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <rect id="rect" stroke="#979797" fill="#D8D8D8" x="0.5" y="0.5" width="159" height="159"></rect>
    <circle id="circle" stroke="#979797" fill="#D8D8D8" cx="280" cy="80" r="79.5"></circle>
    <path d="M480,0.525731112 L433.286197,15.7039659 L404.415479,55.4411003 L404.415479,104.5589 L433.286197,144.296034 L480,159.474269 L526.713803,144.296034 L555.584521,104.5589 L555.584521,55.4411003 L526.713803,15.7039659 L480,0.525731112 Z" id="decagon" stroke="#979797" fill="#D8D8D8"></path>
    <path d="M680,1.12977573 L656.820623,48.0963241 L604.989959,55.6277604 L642.49498,92.1861198 L633.641245,143.807352 L680,119.435112 L726.358755,143.807352 L717.50502,92.1861198 L755.010041,55.6277604 L703.179377,48.0963241 L680,1.12977573 Z" id="star" stroke="#979797" fill="#D8D8D8"></path>
    <line x1="800.5" y1="159.5" x2="960" y2="4" id="line" stroke="#979797" stroke-linecap="square"></line>
  </g>
</svg>

優化後

SVGO Compressor 只適用於導出 SVG 文件 ，拷貝 SVG 代碼是不能被壓縮的，使用插件導出後，會有一行相似的提示：1 SVG files compressed by 29.31%, from 1234 bytes to 873 bytes.動畫

再來看下咱們優化後的代碼

<svg xmlns="http://www.w3.org/2000/svg" width="666" height="102" viewBox="0 0 666 102">
  <g fill="none" fill-rule="evenodd">
    <path fill="#FFF" stroke="#000" stroke-width="2" d="M497.833333,5.28389709 L483.271369,35.1844928 L450.677268,39.9840706 L474.26363,63.2827467 L468.699074,96.160745 L497.833333,80.6389961 L526.967592,96.160745 L521.403037,63.2827467 L544.989398,39.9840706 L512.395298,35.1844928 L497.833333,5.28389709 Z"/>
    <path fill="#FFF" stroke="#000" stroke-linejoin="round" stroke-width="2" d="M347.763441,1 L378.565457,11 L397.602151,35.5491503 L397.602151,66.757608 L378.565457,91.4508497 C365.556718,97.8169499 355.289379,101 347.763441,101 C340.237503,101 329.970164,97.8169499 316.961424,91.4508497 L297.924731,66.757608 L297.924731,35.5491503 L316.961424,11 L347.763441,1 Z"/>
    <rect width="97.677" height="98" x="1" y="2" fill="#FFF" stroke="#000" stroke-width="2"/>
    <circle cx="199.516" cy="51" r="49" stroke="#000" stroke-width="2"/>
    <line x1="576.163" x2="664.267" y1="90.753" y2="12.247" stroke="#000" stroke-linecap="square" stroke-width="2"/>
  </g>
</svg>