不是什麼新知識，一個小技巧而已。

今天遇到一個專案中使用純色圖示的問題，用字型麻煩用圖片low，所以就想直接用svg，畢竟只有一兩個圖示。

第一想法是用 DataURI，然後想到了之前 CSS-tricks 的文章，翻了下做下彙總：

  • 不建議把 svg 轉 base64 來用
  • base64 本身瀏覽器解碼也會消耗一定的資源
  • svg 轉 base64 後反而會變大

解決方案：

  • 壓縮 svg 檔案，使用 SVGO 或者 SVGOMG
  • 使用 DataURI 而不用 base64 ，DataURI 的用法是 data:[<mediatype>][;base64],<data>
    base64 只是宣告 data 使用 base64 編碼而已，非必須（via RFC 2397）

比如，前端觀察的 logo 的 svg，sketch 匯出後有 702 byte，svgo 壓縮後是 292 byte，base64 轉碼後是 937 byte。

最後程式碼如下：

background-image: url("data:image/svg+xml,%3Csvg width='288' height='288' viewBox='0 0 288 288' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eqianduan logo%3C/title%3E%3Cpath d='M222 144v-6l-41-23v12l30.304 17L181 161v12l41-23v-6zm-144.304 0L108 127v-12l-41 23v12l41 23v-12l-30.304-17z' fill='%2318BC9C'/%3E%3C/svg%3E");

參考