SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像。 但当进行 Web 设计时,我们还需要做一些优化来使得 SVG 变得更加轻量。
下面介绍的 20 个工具,可以帮助你快速有效的创建 SVG 图像。现有的在线工具已经可以帮助我们进行优化、转换、新建模式等工作。
更详细的介绍,参见:How To Create SVG Animation Using CSS
交互式 SVG 坐标系统
设计 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
SVG OMG
SVG 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 Sprite
SVG 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
你知道使用 SVG 可以对图片添加效果吗?例如色度,饱和度,模糊度,线性颜色叠加和其他效果。这是一款可以显现这些效果的工具,然后给你一个小片段使得它容易被嵌入效果到你的项目中。
SVG Morpheous
SVG Morpheous 是一个 JavaScript 库,允许你从一个形状到另一个形状改变一个 SVG 图标。你可以设置宽松效果,过度动画的持续时间,以及旋转的方向。
Clip path generator
SVG 允许你单击图片形状修剪。如果形状在一个方形或者圆形里边,就相当简单。但是假设形状是一个带有很多店或者多边形的呢?这就是你需要找个 Clip Path Generator 工具了。
Chartist.js
Chartist.js 一个创建高可定制化响应式图表的库。它利用 SVG 来显示图表,也可以使用 SMIL 动画。使用这个库,你可以创建线性图表,饼图,直方图和其他类型的图表,甚至可以跟图表添加动画。
SVG stroke dash generator
这是一个使用 SVG stroke-dasharray 生成虚线的简单工具。首先选择从列表中选择一个虚线类型,然后在宽度,高度,旋转或颜色方便自定义虚线。然后你可以攫取 HTML 代码和 CSS 应用这条虚线到你的项目中。
Method Draw: A Simple SVG Editor
Method draw 是一个基于 web 的 SVG 编辑器,带有一个两边伴有工具的画布的直观的界面。你可以画线条,形状,输入文本或者使用内置的形状,然后编辑绘画兑现的属性。使用 SVG 格式导出图像(也可以变成 SVG base64 格式)或者直接使用 PNG 保存。
Export Flash to animated SVG
尽管它不在流行了,但是有时候你很难放弃 Flash。如果是这样,你可以让你的 flash 动画变成 SVG 与更新的技术保持协调工作。这个工具塑造了 Flash 应用程序的扩展形式,可以和 CS5,CS5 和 CC 一起工作。
当它变成 Shapes, Bitmaps Symbols, Classic Motion Tweens, Shape tweens,你可以将它导出到SVG(对另一些人来说,成功是有议可争的)。
原文地址:http://www.codeceo.com/article/20-svg-tools.html