《SVG 動畫開發實戰》 - 📋 SVG 基本介紹

📋 SVG 基本介紹

SVG (Scalable Vector Graphics)

現在可縮放的矢量圖（SVG）在 Web 頁面上充當着重要的角色，SVG 圖標、SVG 圖像、SVG 圖案、SVG 動畫甚至是複雜的數據可視化圖表均可以由 SVG 進行繪製。

SVG 特性：

• Responsive

  因爲 SVG 是矢量圖像，能夠無限縮放圖像內容而不失真，這樣在任何終端看到的圖像都是高清的；

• Performance

  SVG 能夠進行優化，經過減小沒必要要的屬性或者路徑中的點或圖形，讓文件尺寸更小；

• Interactive

  SVG 代碼是 XML 語言進行描述的，能夠結合 CSS 以及 JavaScript 進行交互；

• Designable

  業界有很是強大的設計工具能夠將設計好的 SVG 圖像輸出爲 SVG 代碼，好比 Adobe Illustrator、Sketch、InkScape 等。SVG 擁有對設計師和開發者都友好的內容輸出；

• Visualization

  經過結合數據，SVG 也能夠實現複雜的數據可視化圖表，好比: ECharts SVG Version / D3.js 都是使用 SVG 進行圖表繪製。

SVG 基本圖形

<?xml version="1.0" encoding="UTF-8"?>
<svg width="960px" height="160px" viewBox="0 0 960 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>shape page</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <rect id="rect" stroke="#979797" fill="#D8D8D8" x="0.5" y="0.5" width="159" height="159"></rect>
    <circle id="circle" stroke="#979797" fill="#D8D8D8" cx="280" cy="80" r="79.5"></circle>
    <path d="M480,0.525731112 L433.286197,15.7039659 L404.415479,55.4411003 L404.415479,104.5589 L433.286197,144.296034 L480,159.474269 L526.713803,144.296034 L555.584521,104.5589 L555.584521,55.4411003 L526.713803,15.7039659 L480,0.525731112 Z" id="decagon" stroke="#979797" fill="#D8D8D8"></path>
    <path d="M680,1.12977573 L656.820623,48.0963241 L604.989959,55.6277604 L642.49498,92.1861198 L633.641245,143.807352 L680,119.435112 L726.358755,143.807352 L717.50502,92.1861198 L755.010041,55.6277604 L703.179377,48.0963241 L680,1.12977573 Z" id="star" stroke="#979797" fill="#D8D8D8"></path>
    <line x1="800.5" y1="159.5" x2="960" y2="4" id="line" stroke="#979797" stroke-linecap="square"></line>
  </g>
</svg>

上面代碼會繪製出如下圖形

能夠下 CodePen 上進行嘗試 👇
https://codepen.io/xiaoluobod...

SVG 基本圖形 包括：

• rect - 矩形
• circle - 圓形
• ellipse - 橢圓
• line - 線條
• polyline - 折線
• polygon - 多邊形
• path - 路徑

SVG 座標系統

如下例子都是基於上面基本圖形的 SVG 代碼，基本圖形定義以下：

• viewport 爲 960px * 160px
• viewBox 爲 0, 0, 960 160

咱們知道 5 個圖形是在長 960px、寬 160px 的矩形區域內的。

viewport

SVG 的視口範圍（viewport）由 width、height 屬性聲明，定義了 SVG 文檔的可視寬高，若是 SVG 元素不聲明 viewport，則瀏覽器默認給定寬高爲 300px * 150px。

viewport = 300px * 150px

viewbox

SVG 元素的 viewBox 是個強大的屬性，它定義了 SVG 真正意義上具備可縮放的特性，viewBox 的屬性由四個屬性組成 <min-x>、<min-y>、width、height，不難看出，這四個屬性就和座標系、以及可視區域的寬高有關係。<min-x>、<min-y> 決定了 SVG 在座標系中的位置，width、height 決定了 viewBox 的寬高。從而造成一個可見的矩形區域。

實際上，當 SVG 元素不聲明 viewBox 屬性時，SVG 的可視範圍就是 viewport 大小。

<svg width="960px" height="160px">
  <title>shape page</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <!-- some shapes -->
  </g>
</svg>

viewport 等於 viewbox 時

當初始化 viewBox 的座標系爲 0 0 而且寬高聲明等於 viewport 時，等同於沒有設置 viewBox。顯示效果是同樣的。

<svg width="960px" height="160px" viewBox="0 0 960 160">
  <title>shape page</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <!-- some shapes -->
  </g>
</svg>

viewport 大於 viewbox 時，SVG 放大了

假設 viewBox 設定爲 viewport 的一半時

<svg width="960px" height="160px" viewBox="0 0 480 80">
  <title>shape page</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <!-- some shapes -->
  </g>
</svg>

viewport 小於 viewbox 時，SVG 縮小了

假設 viewBox 設定爲 viewport 的2倍時

<svg width="960px" height="160px" viewBox="0 0 1920 160">
  <title>shape page</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <!-- some shapes -->
  </g>
</svg>

深刻了解 SVG座標系統

Sara Soueidan 寫過一個系列，Understanding SVG Coordinate Systems and Transformations 有興趣的童鞋，建議完整閱讀下。

還有一個很是棒的在線例子，幫助你瞭解 SVG 座標系統

SVG Coordinate Systems & Transformations (Part 1)

SVG 動畫

SMIL 或者 CSS 仍是 JavaScript?

技術	描述	備註
SMIL	SMIL 標準即將廢棄，儘可能不要使用	Chrome 45之後棄用了SMIL
CSS	CSS 還只能實現簡單的動畫	-
JavaScript	複雜動畫就要用到 JS了	-

能夠實現什麼類型的 SVG 動畫?

• Transform（scale、rotate、translate 、skew）
• 路徑動畫 （path）
• 描邊動畫（stroke）
• 形狀變化（Morphing)
• 蒙版動畫（Mask）
• 顏色控制（color / background-color / opacity)

優秀的 SVG 類庫

類庫	描述
GSAP	Sarah Drasner Recommend, The best one.
Snap.svg	The "jQuery" of SVG
Velocity.js	Velocity offers a lot of the sequencing that GreenSock does, but without a lot of the bells and whistles
React-Motion	React TechStack
Vivus.js	Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn
anime.js	Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
SVG.js	The lightweight library for manipulating and animating SVG.
d3.js	Bring data to life with SVG, Canvas and HTML.
Sprite.js	SpriteJS 是跨平臺的高性能圖形系統，它可以支持web、node、桌面應用和小程序的圖形繪製和實現各類動畫效果。

此小冊動畫實戰系列採用 GSAP 進行動畫開發。OK，也許你奇怪爲何恰恰選擇了GSAP，後續章節會進行介紹，《🪀 使用 GreenSock 製做動畫 》

參考

• https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial
• https://www.sarasoueidan.com/blog/svg-coordinate-systems/

關於

本文是《SVG 動畫開發實戰》 系列文章第一章。

Notion 版本

小冊是在 Notion 上完成撰寫的，因此我保留了 Notion 的分享版本，你也能夠點擊這裏查看。

GitHub 版本

小冊提供了 GitHub 版本的在線閱讀體驗，傳送門

微信公衆號版本

關注個人技術公號，一樣也能夠找到此小冊系列，目前在更新中。。。