《SVG 動畫開發實戰》 - 📃 SVG 文件輸出

📃 SVG 文件輸出

在編寫 SVG 動畫前，咱們應該先要準備矢量文件，矢量文件包含來咱們須要的 SVG 代碼，一般咱們不會去手寫 SVG 代碼，簡單的形狀還過得去，複雜點的形狀，手寫代碼會變得吃力不少，咱們能夠藉助諸如 Adobe Illustrator（簡稱AI）、Sketch 或者是 Inkscape 這樣的專業的矢量設計工具來進行矢量圖形設計，而後導出 SVG 代碼。

下面咱們主要介紹使用 Sketch 來輸出 SVG 文件

Sketch 輸出 SVG

💡 Sketch Tips

Sketch 是 macOS 上的 UI 設計利器，支持完善的 SVG 圖形編輯功能。上節《SVG 基本介紹》 中的圖形代碼就是經過 Sketch 生成的。下面咱們來認識下跟開發息息相關的一些操做，再來看一下上小節的圖形代碼以及 Sketch 界面：

<?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 id="decagon" 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" stroke="#979797" fill="#D8D8D8"></path>
    <path id="star" 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" stroke="#979797" fill="#D8D8D8"></path>
    <line id="line" x1="800.5" y1="159.5" x2="960" y2="4" stroke="#979797" stroke-linecap="square"></line>
  </g>
</svg>

座標系

💡 開啓 Sketch 的標尺功能有助於咱們找準 （0, 0）座標系

導出爲 SVG 代碼時，咱們能夠看到 viewBox 屬性表明了整張畫布承載圖像內容視口

<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">
  ...
</svg>

命名圖層

💡 建議給圖層命名，導出代碼對應 SVG 中的 g 標籤， g 表明 group（分組） 的意思

給圖層命名後，多個圖層（分組）之間容易分辨，上面例子咱們給圖層命名爲 shape page ，代碼中 g 標籤的 id 屬性就是圖層的名字，Sketch 自動加上了 "-".

命名圖形

💡 建議給圖形命名，導出代碼時對應 SVG 中的基本圖形

同圖層，代碼中圖形的 id 屬性即爲咱們給圖形命名的名稱，上例咱們給圖形命名分別是：line、star、decagon、circle、rect ，這樣區分開每一個圖形代碼。

拷貝 SVG 代碼

在 Sketch 中拷貝 SVG 代碼很簡單，只需在咱們想導出的內容上右鍵，便可找到 「拷貝 SVG 代碼」 功能項。

好比導出圖形 star，選中 star，右鍵拷貝 SVG 代碼：

代碼以下，這時圖層 shape page 只包含了一個圖形：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="154px" height="145px" viewBox="0 0 154 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>star</title>
  <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M77,1.12977573 L53.8206227,48.0963241 L1.98995927,55.6277604 L39.4949796,92.1861198 L30.6412453,143.807352 L77,119.435112 L123.358755,143.807352 L114.50502,92.1861198 L152.010041,55.6277604 L100.179377,48.0963241 L77,1.12977573 Z" id="star" stroke="#979797" fill="#D8D8D8"></path>
  </g>
</svg>

導出 SVG

導出 SVG 文件，不一樣於拷貝 SVG 代碼，須要兩步：

預設 → SVG

文件 → 導出

Sketch 會導出一個 SVG 文件，用編輯器打開 SVG 文件就獲得咱們想要的代碼。

---

Sketch 輸出 SVG 圖像的簡單介紹就到這裏，Sketch 除了能夠建立 SVG 圖形，也能夠編輯 SVG，咱們能夠將網絡上獲取的 SVG 文件進行編輯，獲得本身想要的 SVG 圖像。更強大的功能是 path (路徑)，咱們能夠本身畫出想要的圖形，輸出爲 SVG 代碼，進行動畫開發。

📎 附件

shape-page.sketch

這裏下載 shape page 的 Sketch 版本

實際開發中，開發者用到的 SVG 文件有一些屬性聲明是沒必要要的，咱們須要藉助工具減小 SVG 文件的體積大小。參見下一章節。

關於

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

Notion 版本

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

GitHub 版本

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

微信公衆號版本

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