<svg> 向量圖形元素是 HTML 裡使用「數學向量公式」繪製圖形的元素，所繪製的圖形就是所謂的 SVG 圖形 ( .svg )，因為向量圖形具有放大後「不失真」的特色，可以應用在許多圖示、視覺效果和動畫的領域，這篇教學會簡單介紹 <svg> 向量圖形元素。

原文參考：向量圖形 svg

SVG 教學參考：SVG 完整教學 31 天

認識 <svg>

<svg> 向量圖形元素是 HTML 裡使用「數學向量公式」繪製圖形的元素，所繪製的圖形就是所謂的 SVG 圖片 ( 副檔名結尾 .svg )，因為向量圖形具有放大後「不失真」的特色，許多圖示、動畫都會使用 <svg> 進行繪製。

• <svg> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，內容只會顯示特定繪圖元素。

例如下方的 HTML 開啟後，會在網頁中放入一個使用 <svg> 繪製的紅色正方形。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" style="fill:rgb(255,0,0);"/>
</svg>

如何在網頁中使用 SVG

因為 SVG 本身具有「圖片」和「標記語法」兩種特性，所以除了可以直接使用「標籤」的方法放入 HTML 裡，也可以透過 <img> 的方式載入，載入後就可以透過 <img> 的屬性控制 SVG ( 參考「圖片」 )，以下方的 HTML 為例，網頁中使用兩種方式載入的藍色長方形。

<img src="test.svg" style="width:200px; height:100px;">
<br>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>

<svg> 形狀元素

<svg> 內容支援下列幾種形狀元素，使用者可以透過這些元素繪製向量圖形。

下方的 HTML 執行後，會在網頁中出現紅色長方形、藍色圓形和綠色橢圓形。

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" style="fill:#f00"/>
</svg>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" style="fill:#55f"/>
</svg>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="200" cy="50" rx="100" ry="50" style="fill:#5f5"/>
</svg>

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• Leonardo.Ai 教學
• HTML 教學