將 Illustrator 輸出 SVG 程式碼，並嵌入網頁中，再透過CSS設定大小與顏色

　　先前梅干曾分享過，透過Illustrator繪製好的檔案，轉存成SVG的向量格式，再嵌入到網頁中，無論是放大還是縮小，還是Retina螢幕，影像都能維持一致的清晰，但最大的問題就是，當透過引用的方式，來載入svg檔，無法透過CSS的方式來改變它的顏色。

因此梅干要來分享個小技巧，就是透過Illustrator繪製好的圖檔，再輸出成SVG檔時，可以輸出SVG的程式碼，當把SVG直接嵌入到HTML的網頁中，就可透過CSS來設定SVG的檔案大小以及顏色，因此要如何將Illustrator繪製好的圖檔，輸出成SVG的程式碼，現在就一塊來看看吧！

---

Step1
當一切都繪製好後，將線條轉換成外框筆畫。

---

Step2
接著再把外框，透過路徑管理員，將所有路徑進行聯集。

---

Step3
再 另存新檔 並將格式設為 SVG。

---

Step4
接著把描述檔設為 SVG1.1 ，再點下方的「SVG 程式碼」。

---

Step5
這時會開啟一個文字檔，再把svg的標籤複製起來就好。

---

Step6
再把id與xml:space="preserve刪除，並加入 fill="currentColor"後，就可透過CSS的width來設定SVG的大小，以及color來設定顏色。

---

#範例預覽