文 / 早晚成长 · 鸭弟安安

Hi，这里是安安。上回的SVG科普小文大家还记得吗？

工欲善其事必先利其器，如果你有兴趣深究svg技术，或者是成为小编们羡慕的排版达人的话，那么今天的SVG工具安利一定得Mark下来哦~

|基础制作篇|

01. Adobe Illustrator

官方下载：

https://www.adobe.com/cn/products/illustrator

支持：Mac / Windows

关于制作SVG，首推当然是我Adobe全家桶中的AI啦

Adobe Illustrator作为全球最著名的矢量图形软件，以其强大的功能和体贴用户的界面，已经占据了全球矢量编辑软件中的大部分份额。全球有37%的设计师在使用Adobe Illustrator进行艺术设计。

作为一款非常好的矢量图形处理工具，该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，当然SVG的制作自是不在话下。

02. Sketch

官方下载：https://www.sketch.com/

支持：Mac

这是设计师人群中非常流行的一款设计工具。全矢量、轻量级、像素级精准，非常适合做移动端应用类的界面设计和图标设计，甚至创建自己的字体，堪称为UI设计而生的软件啦。

但一年99美金的收费不低喔，如果不是设计师，安安建议用AI就够啦~

|编辑篇|

01. SVG.js

https://bonsaijs.org/

支持：Web

SVG.js库为开发人员和设计人员提供了一些功能，可以让你将多个SVG图像拼接在一起，创建出可用于视频项目，酷炫的网页动画，当然这一切都取决于你的创造力。

02. 矢量图编辑器：Boxysvg

在线地址：https://boxy-svg.com

支持：Mac

Boxysvg是一款可扩展的矢量图形编辑器。SVG是存储矢量图形的标准格式，如图标、横幅、图表和插图。此项目的目标是为非技术用户以及专业设计人员和开发人员创建最好的SVG编辑器。

|辅助篇|

01. 交互式SVG坐标

地址：https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html

设计SVG，离不开它的坐标系统。这是一个由Sara Souiden 编写的超赞的交互工具，可以帮助你理解SVG坐标系统是怎么一回事。

使用 SVG 的 viewBox 和 preserveAspectRatio，也就是下图所示的粉色线和橙色线，以及旁边的标尺，你可以在折腾的过程中学习到 SVG 坐标是如何工作的。

关于如何使用这个坐标系统，可参考下面这篇文章

传送门：https://www.sarasoueidan.com/blog/svg-coordinate-systems/

02. SVG Morpheus

http://alexk111.github.io/SVG-Morpheus/

支持：Windows / Mac

SVG Morpheous 是一个 JavaScript 库，允许你从一个形状到另一个形状改变一个 SVG 图标，但它并不会那么生硬地变换。并且你可以设置宽松效果，过度动画的持续时间，以及旋转的方向。

03. Snapsvg

在线地址：http://snapsvg.io/

支持：Web

Snap.svg 是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。可以用来创建互动，在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。凭借丰富的动画库和易于的事件处理，Snap.svg 可以帮助你轻松实现SVG功能。

04. SVG背景生成器：Trianglify

在线地址：https://trianglify.io/

支持：Web

如果你只需要一个简单的多边形的纹理背景，那么可以使用 Trianglify 生成器创建漂亮的 SVG 几何图案。你可以随意更换设置颜色，粒度大小并选择一个颜色调色板来配合使用。设置完成以后，即可点击下载SVG图案，实在是很方便了。

05. Bonsai

https://bonsaijs.org/

支持：Web

一个强大的超棒轻量级javascript图形类库。它使用SVG作为输出方式来生成图形和动画效果，拥有非常完整的图形处理API，可以使得你更加方便的处理图形效果。

写在最后

如果本期没有看懂这些软件的用法也不用担心 ，之后安安会进一步为小伙伴们出系列的教程，继续关注就可以学习到啦~

* 资料参考：How To Create SVG Animation Using CSS

* 图片来源：Instagram