![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_00.jpg)
因此梅干要來分享個小技巧,就是透過Illustrator繪製好的圖檔,再輸出成SVG檔時,可以輸出SVG的程式碼,當把SVG直接嵌入到HTML的網頁中,就可透過CSS來設定SVG的檔案大小以及顏色,因此要如何將Illustrator繪製好的圖檔,輸出成SVG的程式碼,現在就一塊來看看吧!
Step1
當一切都繪製好後,將線條轉換成外框筆畫。
![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_01.jpg)
Step2
接著再把外框,透過路徑管理員,將所有路徑進行聯集。
![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_02.jpg)
Step3
再 另存新檔 並將格式設為 SVG。
![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_03.jpg)
Step4
接著把描述檔設為 SVG1.1 ,再點下方的「SVG 程式碼」。
![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_04.jpg)
Step5
這時會開啟一個文字檔,再把svg的標籤複製起來就好。
![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_05.jpg)
Step6
再把id與xml:space="preserve刪除,並加入 fill="currentColor"後,就可透過CSS的width來設定SVG的大小,以及color來設定顏色。
![梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色](http://photo.minwt.com/img/Content/ai/illustrator-to-svg/illustrator-to-svg-code_06.jpg)
#範例預覽