1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 將 Illustrator 輸出 SVG 程式碼,並嵌入網頁中,再透過CSS設定大小與顏色

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

2021/06/09

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

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


Step1
當一切都繪製好後,將線條轉換成外框筆畫
梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色
Step2
接著再把外框,透過路徑管理員,將所有路徑進行聯集
梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色
Step3
再 另存新檔 並將格式設為 SVG
梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色
Step4
接著把描述檔設為 SVG1.1 ,再點下方的「SVG 程式碼」。
梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色
Step5
這時會開啟一個文字檔,再把svg的標籤複製起來就好。
梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色
Step6
再把id與xml:space="preserve刪除,並加入 fill="currentColor"後,就可透過CSS的width來設定SVG的大小,以及color來設定顏色。
梅問題-Illustrator 輸出 SVG 程式碼,直接嵌入網頁中,並用CSS設定大小與顏色
#範例預覽