微信SVG優化技巧：提升網頁載入速度與流暢度

一、SVG圖片介紹

SVG（Scalable Vector Graphics）即可縮放矢量圖形，是一種基於XML語法的圖像格式。和傳統的點陣圖不同，SVG圖像是矢量的，它可以保持清晰度無論放大還是縮小。

SVG圖片優點：

• 渲染清晰度高，縮放不失真
• 文件大小相對較小
• 支持CSS樣式、JavaScript交互等
• 可壓縮性高

二、微信中使用SVG的限制

微信中使用SVG圖片時，需要注意以下幾點：

• 不支持外部文件引用
• 不支持filter，mask等高級特效
• 動畫效果受限，CSS動畫較為受限制
• 樣式需內聯或嵌入到svg標籤內
• 僅在iOS7及以上、Android5.0及以上版本支持

三、SVG優化技巧

1、使用SVG壓縮工具

由於SVG圖像作為文本文件，可以進行壓縮。因此，可以使用工具對SVG文件進行壓縮。常見的SVG壓縮工具有SVGOMG、SVGO等。

 <svg width="106" height="99" viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 23h60v53H24z"/>
    <path d="M12.5 16.5h81l-4.28 42.436h-72.44L12.5 16.5z"/>
    <ellipse transform="rotate(-.53 53.979 60.698)" cx="53.979" cy="60.698" rx="16.963" ry="17.224"/>
 </svg>

使用SVGOMG工具對SVG進行壓縮後：

 <svg viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 23h60v53H24z"/>
    <path d="M12.5 16.5h81l-4.28 42.436h-72.44L12.5 16.5z"/>
    <ellipse transform="rotate(-.53 53.98 60.7)" cx="53.98" cy="60.7" rx="16.96" ry="17.22"/>
 </svg>

壓縮前後可見文件大小縮小約10%。

2、減小SVG文件大小

在使用SVG圖片時，考慮到微信的限制，儘可能減少SVG文件大小，以提高載入速度。

• 儘可能少的節點和命令，減小文件大小
• 盡量避免使用、等標籤，因為它們會增加文件大小，影響載入速度

 <svg viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg">
    <path d="M24 23h60v53H24z"/>
    <path d="M12.5 16.5h81l-4.28 42.436h-72.44L12.5 16.5z"/>
 </svg>

3、避免使用SVG動畫

SVG在微信中的動畫效果非常有限，除了CSS動畫以外幾乎無法使用動畫效果，因此在使用SVG圖片時，最好不要使用SVG動畫。

 <svg viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg">
    <animateTransform>
    </animateTransform>
 </svg>

4、使用字體替代SVG圖片

在部分文字需要用到的情況下，可以考慮使用字體來替代SVG圖片，以減少圖片文件大小，提高載入速度。

 font-family: 'icomoon';
 content: '\e904';

四、結語

以上便是在微信中使用SVG圖片的優化技巧。在使用SVG圖片時，需要考慮微信的限制和文件大小，儘可能減小文件大小，以提高載入速度和流暢度。