svg製做及使用

關於瀏覽器圖標解決方案，一直就有不少CSS Sprite,iconFont,以及SVG.相對而言svg矢量圖標以及支持瀏覽器自身解析的優勢，不少團隊都已經在使用了。這篇文章主要說明svg圖標的使用和製做。

svg的製做

步驟： 一、按照正常導出圖片的方式導出後綴爲png的雪碧圖和單個icon，而後用AI打開該類文件，而後直接導出爲svg後綴的圖片便可 二、能夠安裝壓縮工具，對svg文件進行壓縮 三、安裝svg壓縮工具

npm install svgo -g

svgo xx.svg (能夠將多餘的代碼刪減掉)
複製代碼

壓縮前的效果

壓縮後的效果（其實使用ai導出的文件已是刪減後的了）

步驟：

文件-->導出-->導出爲-->svg後綴 （此方法導出，能夠減小svg的大小，相對於直接存儲的方式）

使用AI製做的svg能夠直接使用，可是使用ps直接導出的svg文件，會使svg中的image標籤受損，在html中沒法顯示

使用AI製做svg時，使用導出後綴爲svg的文件，而不是存儲爲svg的圖片

svg的使用

• 直接在img標籤中使用

<img src="qiy-icon1.svg"/>
複製代碼

• 直接經過background:url()在css中引入

background:url("qiy-icon1.png");
background-size:100% 100%;
複製代碼

也能夠作成後綴爲svg的雪碧圖，用法與png的雪碧圖同樣

svg的兼容處理

在安卓4.2.2 版本上能夠正常展現（因此業務中，不須要作降級處理）

降級寫法

<img src="qiy-icon1.svg" alt=""class="img" onerror="this.src=qiy-icon1.png">

background-image:url("qiy-icon1.png");
/*降級處理不能方便地使用CSS修改Icon的顏色和邊線屬性。*/
background-image:url("qiy-icon1.svg"),none;
background-size:100% 100%;
複製代碼

svg與png的對比

• 單個圖片，大小接近相同
• 雪碧圖，svg比png的大，經過AI導出的svg圖片，已經很小了，此時再經過svgo進行壓縮，也只壓縮了幾至十幾kb

多有不足，歡迎指正哦！！！