前言

呼，在異世界闖蕩的第二週，一邊閒晃一邊來到的城市港口

「喔！這不是旅人嗎？想成為我的夥伴到海上探險嗎？」
「咦？！難道你是...辣個立志要成為 SVG 王的男人？！」
「沒錯，你的能力對我們很有幫助，來成為我的夥伴吧！」
「咦咦咦咦咦？？？？！！！！(ﾟд⊙)」

⇢⇢ 技能確認: ClimateChanger/ 稱號:「天地星辰管理者」...獲取成功

簡介

SVG 全名：可縮放向量圖形(Scalable Vector Graphics)，他是基於 可延伸標記式語言(XML)，二維向量圖片檔案。相較於點陣圖片，SVG 可隨著使用者裝置縮放，確保圖片不會變形失真。

在 SVG 提供了一些元素定義了：圓形、矩形、簡易或複雜的曲線，以及其他形狀。SVG 檔包含了最基本的 svg tag，內容繪製了其基本形狀。另外 SVG 檔內還包含了一個 g tag ，用來將多個貝茲曲線的程式語法組合成群組。

SVG 可以是單純的響應式事件，也可以透過 JavaScript 來觸發。SVG 在網頁圖像設計有很大的優勢，其中包括了 SVG 專屬的無障礙式網頁功能。這些功能確保了其內容可以被大部分的受眾使用。

其他還有幾種 SVG 有關規範如下：

1. SVG 可以透過 SVG tag 將程式碼整理成一支獨立的檔案使用，也可以直接在 HTML 內撰寫 SVG 程式碼。
2. SVG 為 XML 所規範的程式格式，其格式與 XML 1.0 以及 XML 語法相容，但當我們在 HTML 內是使用 SVG 時，可能會造成與 XML 不相容。
3. SVG 內使用 CSS 語法撰寫樣式。
4. SVG 圖層渲染為 由後往前，最下層(後方)圖層會覆蓋住上層(前面)圖層。

理論上我們也可以透過 img 來引入 SVG 檔，但在 Firefox 4.0 之前的瀏覽器版本並不支援。

SVG 入門

首先在繪製 SVG 檔時要先記住以下要點：

• SVG 元素與屬性都是依據 XML 語法撰寫，其格式嚴格規定了大小寫區分(與HTML相反)
• SVG 中的屬性值必須使用雙引號「""」，即便該值是數字。

先來個基礎入門：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="lightpink" />

  <circle cx="150" cy="100" r="80" fill="lightblue" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

上面案例我們可以看到在 SVG 內包含了：

• 基礎 svg 聲明檔，定義整個 SVG 檔內的版本、寬高、XML規範...等。
• rect 矩形，以及矩形的樣式設定。
• circle 圓形，以及圓形的樣式設定。
• text 字體，以及字體的樣式設定。

SVG Animation

SVG 動畫和 CSS3 的動畫定義很像，不過 SVG 有自己專屬的動畫語法，而 SVG 的好處是我們可以先繪製動畫路徑，在指定元素沿著動畫路徑運作。這樣我們就不需要一幀一幀的調整元素位置囉～

而 SVG 動畫有幾種繪製方式：

1. animate
   針對屬性值做動畫，ex:放大、縮小、改變顏色。

   <svg id="pic01" viewbox="-50 -50 100 100">
  <line x1="-20" y1="0" x2="20" y2="0" stroke="black"></line>
  <line x1="0" y1="-20" x2="0" y2="20" stroke="black"></line>
  <circle cx="0" cy="0" r="10" stroke="black" fill="none">
    <animate
      attributeName="r"
      dur="2s"
      values="10;20;10"
      repeatCount="indefinite">
    </animate>
  </circle>
</svg>

2. animateTransform
   針對 X軸 / Y軸 位移、變形做動畫。

<svg id="pic02" viewbox="-50 -50 100 100">
  <circle cx="0" cy="0" r="10" stroke="black" fill="none"></circle>
  <g>
    <line x1="-20" y1="0" x2="20" y2="0" stroke="black"></line>
    <line x1="0" y1="-20" x2="0" y2="20" stroke="black"></line>
    <rect x="-20" y="-20" width="40" height="40" stroke="black" fill="none"></rect>
    <animateTransform
      attributeName="transform"
      type="rotate"
      dur="4s"
      values="0;360"
      repeatCount="indefinite">
    </animateTransform>
  </g>
</svg>

3. CSS 動畫語法
   透過 Transition / Animation 等 CSS 來改變 SVG 樣式來製作動畫。

<svg id="pic03" viewbox="-50 -50 100 100">
  <rect class="frame_outer" x="-35" y="-35" width="70" height="70" stroke="black" fill="white">
</svg>

#pic03 {
	width: 240px;
	border: solid;
	margin: 10%;
}

#pic03 .frame_outer {
	transform: scale(0.5);
	transition-duration: 2s;
}

#pic03 .frame_outer:hover {
	transform: scale(1);
}

4. animateMotion
   自定義動畫位移路徑，讓元素沿著路徑移動。

<svg id="pic04" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="black" stroke-width="2"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="blue">
    <animateMotion dur="10s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

今天我們踏上了網頁動畫的新領域，在網頁上使用 SVG 就可以更輕鬆的做到 CSS 的動畫效果，那麼接下來的幾天就讓我們盡情暢遊 SVG 的世界，深入了解 SVG 屬性吧！

參考資料

• W3.org - Scalable Vector Graphics (SVG) 2
• MDN - SVG element reference