- 摩刻部落 - https://www.moke.tw/wordpress -

meMoke:製作4000+的SVG圖示檔

上一篇開發日記 [1]中,有提到為了支援舊版 Android,我必須要建立上千張的 SVG 圖示檔。光是想到這件事情就覺得很累人。於是懶惰的我決定用 JavaScript 寫一隻程式自動產生所有的圖檔。很多人可能不知道,JavaScript 也是可以下載檔案的。所以我就簡單寫了一隻小程式來下載檔案(當然是從網路找來改的):

function download(iconWord, color) {
    $.get("GoogleMaterialIcons/"+iconWord+".svg", function(iconObj) {
        var iconContent = new XMLSerializer().serializeToString(iconObj);   //取得SVG的內容
        var fillStart = iconContent.indexOf("fill");    //找到第一個fill填充顏色的屬性
        var fillEnd = iconContent.indexOf("\"", fillStart+6);   //屬性的結尾
        //產生新的SVG內容
        iconContent = iconContent.substring(0, fillStart+6) + color + iconContent.substring(fillEnd, iconContent.length);

        var pom = document.createElement('a');  //建立下載檔案的連結物件(沒有顯示在畫面上)
        pom.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(iconContent));    //設定下載內容
        pom.setAttribute('download', iconWord); //設定檔名

        if (document.createEvent) {
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            pom.dispatchEvent(event);   //自動觸發click事件
        }
        else {
            pom.click();
        }
    });
}

解決圖示之後,剩下的就不是問題了(apk 增加 2.2MB)。把所有的圖檔根據不同顏色放在各別的資料夾中,看要讀取什麼顏色就把圖檔路徑指向該色的資料夾即可。修改後的程式碼一樣放到 GitHub [2] 上,不過為了避免放太多的圖檔,我只有上傳黑色和白色的圖示。

雖然還有很多想要改的功能,不過我最近又有其它的計劃,下次改版就不知道會是什麼時候了。