SVG在网页设计领域越来越流行，你可以使用Illustrator或Inkscape来创建SVG图像。但是在做网页设计的时候，我们还是需要做一些优化，让SVG更加轻量化。下面介绍的20种工具可以帮助您快速高效地创建SVG图像。现有的在线工具已经可以帮助我们进行优化、转换和新模型。更详细的介绍参见：HowToCreateSVGAnimationUsingCSSInteractiveSVGCoordinateSystem设计SVG离不开它的坐标系。这是SaraSouiden编写的一个很棒的交互式工具，可以帮助您了解SVG坐标系的全部内容。使用SVG的viewBox和preserveAspectRatio，也就是下图中粉色和橙色的线条，以及旁边的尺子，可以了解到SVG坐标在折腾的过程中是如何工作的。b64b64是一个优化图片格式转base64的小工具。您可以只输入SVG图像（或JPG和PNG），然后直接在您的网站上以CSS形式获取结果。SVGO的默认SVG包含很多不需要的信息，可以在不影响图像本身的情况下将其删除。如果你想删除编辑器元数据、评论或隐藏节点，你可以使用SVGO。可以通过npm安装SVGO$[sudo]npminstall-gsvgo还有GUI版的，可以愉快的拖来拖去。SVGOMGSVGOMG将SVGO的命令行打包成一个带有GUI的版本，您只需单击按钮即可打开和关闭该功能，最后您只需导出图片或代码即可。现在的SVG当您在Illustrator中工作时，输出的SVG包含很多不必要的信息。使用此工具，您可以直接从Illustrator获得导出的SVG的优化版本。此工具向面板添加了一些优化SVG选项。您可以从CreativeCloud插件页面获取SVGNow。SVG到PNG转换器想要将输出的SVG文件转换为PNG格式？不打开像Illustrator这样的应用程序就可以做到吗？使用此SVG到PNG转换器获取PNG格式的输出图像，并在需要时获取PNG的Base64数据URI。SVGCircus如果您认为加载动画很酷，现在您可以使用SVGCircus轻松处理SVG。此工具可让您制作自己的加载器、微调器或任何类似的循环动画。设置面板的“角色”、位置、大小、颜色等形式，然后导出即可得到结果。SVGSpriteSVGSprite是一个Node.js模块，它优化了一堆SVG文件并将它们烘焙成SVG精灵类型，具有传统的背景CSS精灵或前景图像、SVG堆栈等。准使用准，您可以生成如下所示的准晶体图像。这个生成器只是实验性的，但结果非常棒。您可以通过更改选项值来试用它，然后使用“保存SVG”按钮下载它。PlainPattern使用SVG创建图案从未如此简单或有趣。上传您的图像，将其缩小或更改间隔，旋转并重新着色，直到您获得漂亮的图案。您可以在下载前预览结果。#p#Trianglify生成器使用Trianglify生成器创建漂亮的SVG几何图案。您可以自由/可变地设置颜色、颗粒大小并选择要匹配的调色板。此工具是Trianglify的GUI版本。SVG渐变你知道你可以用CSS制作渐变，但你知道你可以用SVG做同样的事情吗？使用SVG创建渐变的最简单方法是使用此工具。只需输入开始和停止颜色并获取代码即可产生效果。还包括CSS回退。将PSD导出为SVG如果您使用Photoshop作为工作的图像编辑器，有时您可能需要在Photoshop的工作区中将您的设计转换为SVG，Photoshop不支持这种格式。将脚本下载到此工具中，并将它们复制到Adob??ePhotosho/presets/scripts文件夹中。使用SVG扩展重命名矢量图层名称（例如layer1变为layer1.svg），您现在可以从文件>脚本>PS运行脚本到SVG。SVG滤镜你知道你可以使用SVG给图片添加效果吗？如色相、饱和度、模糊、线性颜色叠加等效果。这是一个可视化这些效果的工具，然后为您提供一个小片段，使您可以轻松地将效果嵌入到您的项目中。SVGMorpheousSVGMorpheous是一个JavaScript库，它允许您将SVG图标从一种形状变形为另一种形状。您可以设置缓动效果、过度动画的持续时间和旋转方向。剪辑路径生成器SVG允许您在单击时剪辑图像形状。如果形状在正方形或圆形内，则相当容易。但是，如果形状是具有许多商店或多边形的形状怎么办？这就是您找到剪辑路径生成器工具所需要的。Chartist.jsChartist.js是一个用于创建高度可定制的响应式图表的库。它利用SVG显示图表，也可以使用SMIL动画。使用这个库，您可以创建折线图、饼图、直方图和其他类型的图表，甚至可以为图表添加动画。SVGstrokedashgenerator这是一个使用SVGstroke-dasharray生成虚线的简单工具。首先从列表中选择一种破折号类型，然后根据宽度、高度、旋转或颜色自定义破折号。然后您可以获取HTML代码和CSS以将此虚线应用到您的项目中。MethodDraw：一个简单的SVG编辑器Methoddraw是一个基于Web的SVG编辑器，具有直观的界面，画布两侧是工具。您可以绘制线条、形状、输入文本或使用内置形状，然后编辑绘图的属性以实现。以SVG格式导出图像（也可以转换为SVGbase64格式）或直接保存为PNG。将Flash导出为动画SVG即使它不再流行，有时也很难放弃Flash。如果是这样，您可以将Flash动画制作成SVG，以便与更新的技术保持协调一致。该工具塑造了Flash应用程序的扩展形式，并与CS5、CS5和CC一起使用。当它变成Shapes、BitmapsSymbols、ClassicMotionTweens、Shapetweens时，您可以将其导出为SVG（对于其他人，成功与否值得商榷）。
