关于svg: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 版本的在线浏览体验，传送门

微信公众号版本

关注我的技术公号，同样也能够找到此小册系列，目前在更新中。。。