[筆記] SVG (Scalable Vector Graphics – 可縮放向量圖形)

若有在做網頁/網站的朋友,可能有聽過SVG,沒聽過的可先參考一下這篇Wiki,他跟PNG很像,SVG是個向量圖檔,如果你有用過知名的向量繪圖軟體Adobe Illustrator,大概就會知道它的特性,因為向量圖不像是JPEG這類的點陣圖,是用成千上萬個pixel點陣組合而成的圖片,而是儲存了許多資訊讓電腦用類似繪圖的方式把圖像畫(算)出來,所以不管你怎麼縮放他可以保持不會糊掉一樣非常清晰不失真的特性,同時,在多數情況,他的檔案遠小於JPG/PNG等類型的圖片格式,因為他只是記錄許許多多的程式碼,讓電腦算出圖形。但少數情況他會很大,例如你用SVG去包了一張JPEG圖片或是你的圖片本身複雜度極高等等特殊情況。

SVG特性:

  • 通常檔案很小、讀取速度快
  • 保有各種元素、圖層資訊,因此可直接把檔案丟進Figma, Adobe XD, Adobe Illustrator可以直接開啟編輯
  • 用VS code或各種文字編輯器開啟會是<svg>…</svg>的一大段程式碼
  • SVG本身可做動畫、也可搭配CSS做動畫
  • 可直接整段程式碼貼在HTML運作、也可用類似圖片檔的*.svg放在CSS/HTML中運作

SVG基礎知識補充可參考MDN文件:https://developer.mozilla.org/zh-TW/docs/Web/SVG

SVG繪圖你可以學習SVG的標記語言去寫程式碼畫出圖,也可以用各種向量繪圖工具(如Illustrator, XD, Figma, Sketch…等)繪圖後,轉出成SVG檔,就是SVG了!若你需要針對這個SVG圖形加工,例如加上動畫或是CSS class之類的,也可以直接用文字編輯器開啟繪圖軟體轉存的svg檔,即可得到完整的程式碼進行編輯。

<path>:圖形的路徑。

<def>:定義用的標籤,用來儲存等一下才要用的圖形。

<g>:Group群組的概念,跟Adobe內的將不同圖層/元素組成一個群組的概念類似。

<text>:放文字的標籤。

<animate>:動畫就是用這個tag來做,例如下面範例:

<text ... > 或 <g> 或 <path>等
<animate attributeName="opacity" dur="10s" keyTimes="0;0.24;0.36;0.9;1" values="1;1;0;0;1" repeatCount="indefinite"/>
</text>

翻譯:調整透明度,總長度10秒,0秒透明度1、2.4秒透明度1、3.6秒透明度0、9秒透明度0、10秒透明度1(則透明度會自動在這些秒數淡入淡出)、indefinite永久循環播放。

延伸閱讀:https://ithelp.ithome.com.tw/articles/10159283