Flutter｜使用SVG格式的客製化ICON

Jan 24, 2022

會研究使用SVG格式的起始點是，公司UI問客製化ICON的圖要出哪些倍率的png給我，當下我就忍不住微微地笑了（因為覺得歐買尬光想到後面要針對不同倍率做不同圖片設定…省略百字murmur），然後說我晚點跟你說，便去看Flutter的SVG有沒有解法～

什麼是SVG？

SVG是一種圖形格式（常見的像是jpg、png、pdf這些都是圖形格式），基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。特色是不受限於解析度，以向量圖形組成（非像素構成），而且檔案小，降低效能負擔，是很常使用在網頁及App的格式。

SVG設計注意事項

在決定一張圖的輸出格式前，需特別考量他的設計方式及使用情境，例如圖層設計是否包含陰影、漸層或其他特效等等。在較複雜的圖層設計下，就要留意是否輸出PNG的整體效率高於SVG。

既然SVG是一個向量檔，輸出檔案前須建立外框，而非使用路徑。產出SVG的軟體很多種，例如Sketch或Adobe Illustration。以下簡單示意使用Figma的輸出方式：

將整組ICON選起後，從右側邊欄找出「Export」，將「＋」按下去，選擇輸出圖片的格式為「SVG」，按下下方的按鍵「Export btn_home_disabled 1」就會得到SVG格式的圖片檔案。輸出svg可以使用任意尺寸，因為向量檔的關係，不管是3030還是300300都是一樣的效果。

如何在Flutter中使用svg？

將上面已經做好的svg檔案準備好，接著就是要把這些SVG透過FlutterIcon進行封裝，得到我們可以使用的檔案。在使用封裝的ICON檔案，會得到.ttf檔，其實就像在使用文字字體，不管是100pt還是1000pt，都不會因為變大而讓它失真。

進入網站後會看到以下畫面，使用自製ICON會用到的欄位是黃色標記的三個，當然也可以在左邊綠色框框的地方搜尋關鍵字找出適合的ICON加入Custom Icons，FlutterIcon已經包好大眾常使用的ICON網站（像是font awesome、Entypo……），可以加入現有的或你自己的，將客製過的設定檔包出來。

（1）封裝的名字（也是進入Flutter後會使用的字體名稱）

（2）將要用的ICON檔案放入

（3）下載轉譯檔案

///// Tips

檔案置入後會顯示轉譯後的圖樣，可以在此階段檢視ICON是不是跟輸出的圖樣相同。不相同時，需特別檢查原檔是否有轉外框，如果沒轉外框可能發生直接消失不見的狀況，仔細觀察右邊上圖藍色ICON的圓圈是路徑（還沒建外框），導致左邊轉譯後的ICON，圓圈直接消失。

另外，建議在製作時，如果是同一個圖層可以解決的，就將他們的路徑合併，不然會出現右邊下方藍色ICON的狀況，原本為一個實心圓，卻因為有多重路徑，轉譯後直接中空給你看。

補充一個小心得，從UI那取得檔案時，因為跑了一遍上面的流程才發現路徑轉外框跟平面化的誤區，但有時使用Figma的outline仍然會拿到跟輸出圖不一樣的轉譯圖檔，這時可以多試試別的方法，像是做出路徑圓後轉外框，卻得到一整個實心的圓，這時可以多方嘗試不同順序的平面化或是合併路徑等等地各種方法（土法煉鋼式）。