如何使SVG圖檔轉換成SVG path

Mio

Published in

斜槓女紙

May 12, 2019

大家應該都遇過這種情況，設計稿上的icon，先大膽假設是白底黑圖好了，然後hover效果要便成黑底白圖。

這個時候你可能想打我臉，偷懶一下用 Font Awesome 就可以了阿～

但總是會有例外的情況發生，客人嫌棄設計師的圖不符合他的需求、或是有神秘的大魔王說『我們要用專屬這個專案的特殊設計』，於是乎出現了各種奇奇怪怪的圖案出來…..

相信遇到這種狀況的負責產生layout的切版人員(我想很久還是想不到其他說法，有沒有大大要指點一下QQ)，應該都用過小妹我這個方法，直接暴力輸出2張png圖，然後利用CSS設定不同情況下的visible和hidden

其實這個方法就能解決大部分情況了，而且也相當簡易上手。這裡就不多說明做法了…

但那天的我可能忘了吃藥，很突發奇想的想要使用SVG來製作icon，天真地想要利用fill屬性來完成這個挑戰，認真的拜讀了oxxo大大認真寫的 SVG 研究之路後，這條道路不是我短短的看一下就能成功的阿，光是要設計SVG Path就是個艱辛的過程。

對 SVG 研究之路全文有興趣的可以參考一下：
2014 iT 邦幫忙鐵人賽：SVG 30 天 ~ 就要醬玩系列

中間一度崩潰想要走回老路，但又任性的覺得我頭都洗下去了，至少要有個東西出來才甘願。默默地求助google大神後發現了這麼一個方法….可以將使用img標籤插入的svg圖檔轉換成SVG path的方式。

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});

想當然爾，興奮得我馬上實際應用嘗試了。

成功後內心的小花兒朵朵開，如此一來我就能利用background、fill等css屬性來控制SVG path了。

但是事情有一好總是沒兩好的，後來發現這個方法蠻吃流量的，每次載入網頁前還能看到些SVG path沒被css控制縮小尺寸前的暫存畫面，對於瀏覽網頁來說其實有點NG啊~

我使用的SVG檔案尺寸大小100X100 px

這缺點目前我還沒找到改進的方法，不知道各位大大們有沒有什麼其他好法子呢？歡迎跟我說窩~

參考來源：css — img src SVG更改填充颜色

你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！

【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂

如何使SVG圖檔轉換成SVG path

Written by Mio