SVG 现正在 Web 设计领域变得越发流行， 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像。 但当进行 Web 设计时，我们还需要做一些优化来使得 SVG 变得更加轻量。 下面介绍的 20 个工具，可以帮助你快速有效的创建 SVG 图像。现有的在线工具已经可以帮助我们进行优化、转换、新建模式等工作。 更详细的介绍，参见：How To Create SVG Animation Using CSS 设计 SVG，离不开它的坐标系统。这是一个由 Sara Souiden 编写的超赞的交互工具，可以帮助你理解 SVG 坐标系统是怎么一回事。 使用 SVG 的 viewBox 和 preserveAspectRatio，也就是下图所示的粉色线和橙色线，以及旁边的标尺，你可以在折腾的过程中学习到 SVG 坐标是如何工作的。
b64 b64 是一个通过将图像格式转换为 base64 来进行优化的小工具。 你可以直接把你的 SVG 图像（或者 JPG 和 PNG 也行）扔进去，然后直接把结果作为 CSS 弄到你的网站上就行了。 SVGO默认的 SVG 包含了许多可删除的不必要的信息，删除这些东西不会影响图像本身。如果你想删除关于编辑器元数据、注释或者隐藏的节点，你可以用 SVGO。 你可以通过 npm 来安装 SVGO $ [sudo] npm install -g svgo 也可以使用 GUI 版本，这样你就可以愉快的拖拖拖了。 SVG OMGSVG OMG 将 SVGO 的命令行包装成了一个带 GUI 的版本，你可以简单的通过点点按钮来打开和关闭特性，最后你导出一下图片或者代码就行了。
SVG Now当你工作在 Illustrator 上时，输出的 SVG 包含许多并不需要的信息。使用这个工具你可以从你的 Illustrator 右边得到优化版本的导出 SVG 。这个工具在面板上添加了一些优化 SVG 选项。你可以从Creative Cloud Add-ons page 取得 SVG Now。
SVG to PNG converter想要把输出的 SVG 文件转换成 PNG 格式？不用打开类似 Illustrator 这样的应用就能做？使用这个 SVG 到 PNG 转换工具可以得到 PNG 格式的输出图像，并且如果你需要的话还能得到 PNG 的 Base64 数据 URI 。
SVG Circus如果你认为加载动画很酷，那么现在你可以通过 SVG Circus 来简单地处理 SVG。这个工具可以让你制作自己的加载器，旋转器，或者任何类似的循环动画。设置‘角色’，位置，尺寸，颜色和其他形式的面板，之后输出就可以得到结果。
SVG SpriteSVG Sprite 是一个Node.js 模块， 可以优化一大堆 SVG 文件，并烤制成 SVG sprite-types，带有传统的背景 CSS sprites 或者前景图片，SVG stacks 以及其他的。 Quasi使用 quasi，你可以生成如下看到的 Quasicrystal 图片。这个生成器只是试验性的，但是结果却是很酷。你可以通过改变选项值试用一下，然后使用'Save SVG'按钮下载下来。
Plain Pattern使用 SVG 创图案从来就不是简单而很有趣的事情。上传你的图片，按比例缩小或改变间隔，旋转和重新着色，直到你得到一个漂亮的图案。你可以在下载之前预览结果。
Trianglify Generator使用 Trianglify 生成器创建漂亮的 SVG 几何图案。你可以随意/变化设置颜色，粒度大小并选择一个颜色调色板来配合使用。这个工具是 Trianglify 的GUI版本。
SVG Gradient你知道你可以使用 CSS 来制作渐变 但是你知道你也可以使用 SVG 做到相同的效果吗？使用 SVG 产生渐变最简单的方式是使用这个工具。只需要输入开始和停止颜色，然后就可以获得产生效果的代码了。 CSS 的后退也有包括。
Export PSD to SVG如果你使用 Photoshop 作为你作品的图片编辑器，有时候你可以需要在 Photoshop 的 workspace 里边转换你的设计成 SVG， 在 Photoshop 中有一个不支持的格式。下载脚本到这个工具里边， 然后复制到 Adobe Photosho/presets/scripts 文件夹里边。用 SVG 扩展名重命名一个矢量层名字 (e.g. layer1变成layer1.svg), 你现在可以从 File > Scripts > PS to SVG 来运行脚本了。 SVG Filters |
