实际开发中，几乎不会手写SVG，而是使用Adobe Illustrator(AI)、Sketch 或 Inkscape等专业的矢量设计工具设计矢量图形，然后导出为SVG。
SVG导出
使用AI，文件>存储为，在保存对话框选择SVG code按钮，就可以直接得到svg代码。
或者，直接编辑 > 复制，然后吧svg代码粘贴到html中。
这两种方法得到的svg体积很大，没有进过优化，一般不能直接用在正式环境中。
SVG优化
减少路径的控制点
使用 Illustrator 菜单栏上的 对象>路径>简化 优化图形的节点
一般建议在90%左右。
使用合适的画布尺寸
推荐画布的尺寸为100x100。矢量图形可以无限放大缩小，在导出后，可以任意的改变大小。
Illustrator 菜单栏上 对象>画板>适合图稿边界，可以自动根据画布中的图形元素的边界调整画布的尺寸
第三方工具进行优化
经过优化，就可以使用 Illustrator 导出 SVG 代码文件了。之后还可以使用SVG专业的优化工具更进一步优化。
-
SVGO/SVGO-GUI：一个基于 node 的优化工具，直接使用
svgo svg-name.svg；对于GUI程序，运行软件之后，直接把 SVG 文件拖入到软件中，会自从帮你优化好 SVG 文件 -
SVGOMG：在线优化工具，有很多的选项自定义优化 SVG 文件。
SVG动画
SVG图像在web中可以使用多种方式驱动动画：
- SMIL：是本地SVG动画规范。
- Web Animations API：本地JavaScript API，可创建更复杂的连续动画而无需加载任何外部脚本
- WebGL
- CSS animation
SVG动画实现的方式都是基于这四种，包括一些动画库，也都是借助此来实现，后面会进一步探索如何使用它们。
