svg、png哪个更清晰_20个有用的SVG工具，可提供更好的图形

如今，SVG在Web设计中日渐流行，您可以使用Illustrator或Inkscape之类的工具来创建SVG图形。 但是当涉及到网页设计时，我们应该始终进行优化以获得更轻松的结果。

在这里，您可以使用20种工具快速有效地使用SVG 。 我们主要提供在线工具，可以帮助您进行优化，转换， 制作图案等。

使用SVG时，您无法离开其坐标。 这是Sara Souiden的出色交互工具，可帮助您了解SVG坐标的工作原理 。 在橙色和紫色线条以及方便的标尺的引导下，使用SVG上的viewBox和preserveAspectRatio ，您可以在学习SVG坐标功能的同时进行游戏。

b64是优化图像然后将其转换为base64格式的简单工具。 您可以删除SVG图像（其他格式（例如JPG和PNG也可以使用）），然后获取带有base64背景图像CSS。

导出的SVG可能包含不必要的信息 ，可以在不影响渲染结果的情况下将其删除。 如果要删除编辑器元数据，注释或隐藏的元素 ，则可以使用SVGO。

您可以通过npm， $ [sudo] npm install -g svgo或使用提供拖放功能的GUI版本进行SVG优化。

SVG OMG将SVGO （以前的工具）的命令行转换为更加直观和易于使用的GUI版本 。 只需切换按钮即可激活或停用每个功能。 最后，您还可以将结果作为图像文件和代码来获取。

在Illustrator上工作时，导出的SVG包含一些不必要的信息。 使用此工具，您可以直接从Illustrator工作区中获取导出的SVG的优化版本 。 该工具添加了带有一些选项的面板，以优化SVG。 您可以从Creative Cloud附件页面上获取SVG Now。

要将SVG文件导出为PNG格式 ？ 不打开像Illustrator这样的应用程序就可以这样做吗？ 使用此SVG到PNG转换器工具可以获取PNG格式的图像输出，如果需要还可以获取PNG Base64数据URI。

如果您认为加载器动画很酷，那么现在可以通过将SVG与SVG Circus结合使用来轻松创建它。 使用这些工具，您可以使用循环动画​​制作自己的装载机，微调器或类似的东西 。 在面板上设置“演员”，位置，大小，颜色和其他内容，然后导出以获取结果。

SVG Sprite是一个Node.js模块，它可以优化一堆SVG文件，并将它们烘焙为SVG Sprite类型，包括用于背景和/或前景图像的传统CSS Sprite ，SVG堆栈等。

使用准图像，您可以生成准晶体图像，如下所示。 该生成器是实验性的，但结果肯定很酷。 您可以通过更改选项值来进行操作，然后使用“保存SVG”按钮下载结果。

使用SVG创建模式从未如此简单或有趣。 上载图像，缩小比例或更改间距，旋转并重新着色，直到获得漂亮的图案。 您可以在下载前预览结果。

使用Trianglify Generator 创建漂亮的SVG几何图案 。 您可以设置颜色随机性/变体，粒度大小，并选择要使用的调色板。 该工具是Trianglify的GUI版本。

您知道可以使用CSS进行渐变，但您知道可以使用SVG 进行渐变吗？ 在SVG上生成梯度的最简单方法是使用此工具。 只需输入开始和停止颜色，您将获得生成结果的代码。 还包括CSS的备用。

如果使用Photoshop作为工作的图像编辑器，有时可能需要将Photoshop工作区上的设计转换为SVG ，这是Photoshop中不受支持的格式。 将脚本下载到此工具，然后复制到Adobe Photoshop/presets/scripts文件夹。

使用SVG扩展名重命名矢量层名称（例如，layer1变为layer1.svg），现在您可以从File> Scripts> PS to SVG运行脚本。

您是否知道使用SVG可以为图像添加诸如色相，饱和度，模糊，线性色彩叠加等效果？ 这是一个可视化这些效果的工具，然后为您提供了一个片段 ，可轻松将效果嵌入到项目中。

SVG Morpheous是一个JavaScript库，允许您将SVG图标从一种形状变形为另一种形状 。 您可以设置缓动效果，过渡动画的持续时间以及旋转方向。

SVG允许您单击带有Shape的图像片段。 如果形状为正方形或圆形，则这非常容易。 但是， 如果形状是具有很多点的形状或多边形形状呢？ 那就是您需要此“剪切路径生成器”工具的地方。

Chartist.js是一个用于创建高度可定制的响应式图表的库。 它利用SVG来显示图表，也可以使用SMIL对其进行动画处理。 使用此库，您可以创建折线图，饼图，条形图和其他类型的图表，甚至可以向其中添加动画 。

这是一个使用SVG stroke-dasharray 生成虚线的简单工具。 首先从列表中选择一种破折号类型，然后根据宽度，高度，旋转度或颜色对其进行自定义。 之后，您可以获取HTML代码和CSS，以在项目中应用此虚线。

Method Draw是基于Web的SVG编辑器， 在画布的两面都带有直观的界面和工具 。 您可以绘制线条，形状，输入文本或使用内置形状，然后编辑绘制对象的属性。 以SVG格式（也以SVG base64格式提供）导出图像，或直接保存为PNG。

尽管它不再流行，但是有些人还是很难摆脱Flash。 如果是这样，您可以将Flash动画转换为SVG，以使其与更新的技术兼容 。 该工具是Flash应用程序的扩展，可以在CS5，CS6和CC上运行。

当涉及到“形状”，“位图符号”，“经典补间”和“补间”时，您可以导出到SVG中（对于其他人，可以说是成功的）。

翻译自: https://www.hongkiat.com/blog/svg-tools/