svg製作及使用

佳寶兒發表於2018-11-28
SVG

關於瀏覽器圖示解決方案，一直就有很多CSS Sprite,iconFont,以及SVG.相對而言svg向量圖示以及支援瀏覽器自身解析的優點，很多團隊都已經在使用了。這篇文章主要說明svg圖示的使用和製作。

svg的製作

步驟： 1、按照正常匯出圖片的方式匯出字尾為png的雪碧圖和單個icon，然後用AI開啟該類檔案，然後直接匯出為svg字尾的圖片即可 2、可以安裝壓縮工具，對svg檔案進行壓縮 3、安裝svg壓縮工具

npm install svgo -g

svgo xx.svg (可以將多餘的程式碼刪減掉)
複製程式碼

壓縮前的效果

svg製作及使用

壓縮後的效果（其實使用ai匯出的檔案已經是刪減後的了）

svg製作及使用

步驟：

檔案-->匯出-->匯出為-->svg字尾 （此方法匯出，可以減少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

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

相關文章