如今,SVG在Web设计中日渐流行,您可以使用Illustrator或Inkscape之类的工具来创建SVG图形。 但是当涉及到网页设计时,我们应该始终进行优化以获得更轻松的结果。
在这里,您可以使用20种工具快速有效地使用SVG 。 我们主要提供在线工具,可以帮助您进行优化,转换, 制作图案等。
使用SVG时,您无法离开其坐标。 这是Sara Souiden的出色交互工具,可帮助您了解SVG坐标的工作原理 。 在橙色和紫色线条以及方便的标尺的引导下,使用SVG上的viewBox
和preserveAspectRatio
,您可以在学习SVG坐标功能的同时进行游戏。
![](https://i-blog.csdnimg.cn/blog_migrate/9836658b83cf5b5be1915c35a98a90ee.png)
b64是优化图像然后将其转换为base64格式的简单工具。 您可以删除SVG图像(其他格式(例如JPG和PNG也可以使用)),然后获取带有base64背景图像CSS。
![](https://i-blog.csdnimg.cn/blog_migrate/2a37f978effe29855afb2b9d98f7d664.png)
导出的SVG可能包含不必要的信息 ,可以在不影响渲染结果的情况下将其删除。 如果要删除编辑器元数据,注释或隐藏的元素 ,则可以使用SVGO。
您可以通过npm, $ [sudo] npm install -g svgo
或使用提供拖放功能的GUI版本进行SVG优化。
SVG OMG将SVGO (以前的工具)的命令行转换为更加直观和易于使用的GUI版本 。 只需切换按钮即可激活或停用每个功能。 最后,您还可以将结果作为图像文件和代码来获取。
![](https://i-blog.csdnimg.cn/blog_migrate/a128e529b9ea1f21ca8145cf53fc3c07.png)
在Illustrator上工作时,导出的SVG包含一些不必要的信息。 使用此工具,您可以直接从Illustrator工作区中获取导出的SVG的优化版本 。 该工具添加了带有一些选项的面板,以优化SVG。 您可以从Creative Cloud附件页面上获取SVG Now。
![](https://i-blog.csdnimg.cn/blog_migrate/982c9cd417fa7fb0d265f43777e8a0cc.png)
要将SVG文件导出为PNG格式 ? 不打开像Illustrator这样的应用程序就可以这样做吗? 使用此SVG到PNG转换器工具可以获取PNG格式的图像输出,如果需要还可以获取PNG Base64数据URI。
![](https://i-blog.csdnimg.cn/blog_migrate/9602fda4b4be03005e203d71802b804d.png)
如果您认为加载器动画很酷,那么现在可以通过将SVG与SVG Circus结合使用来轻松创建它。 使用这些工具,您可以使用循环动画制作自己的装载机,微调器或类似的东西 。 在面板上设置“演员”,位置,大小,颜色和其他内容,然后导出以获取结果。
![](https://i-blog.csdnimg.cn/blog_migrate/0d6e1e1de05314ff71311b45d210c515.png)
SVG Sprite是一个Node.js模块,它可以优化一堆SVG文件,并将它们烘焙为SVG Sprite类型,包括用于背景和/或前景图像的传统CSS Sprite ,SVG堆栈等。
使用准图像,您可以生成准晶体图像,如下所示。 该生成器是实验性的,但结果肯定很酷。 您可以通过更改选项值来进行操作,然后使用“保存SVG”按钮下载结果。
![](https://i-blog.csdnimg.cn/blog_migrate/0d8e0483a3fa716f139ed375db95e5c2.png)
使用SVG创建模式从未如此简单或有趣。 上载图像,缩小比例或更改间距,旋转并重新着色,直到获得漂亮的图案。 您可以在下载前预览结果。
![](https://i-blog.csdnimg.cn/blog_migrate/4f4d93a08000cf680f7ef651c43f9aea.png)
使用Trianglify Generator 创建漂亮的SVG几何图案 。 您可以设置颜色随机性/变体,粒度大小,并选择要使用的调色板。 该工具是Trianglify的GUI版本。
![](https://i-blog.csdnimg.cn/blog_migrate/b8b9e2c35a3afb0726f8c8d537b793eb.png)
您知道可以使用CSS进行渐变,但您知道可以使用SVG 进行渐变吗? 在SVG上生成梯度的最简单方法是使用此工具。 只需输入开始和停止颜色,您将获得生成结果的代码。 还包括CSS的备用。
![](https://i-blog.csdnimg.cn/blog_migrate/e85c4579ea873a7b5ee630ddfa342b08.png)
如果使用Photoshop作为工作的图像编辑器,有时可能需要将Photoshop工作区上的设计转换为SVG ,这是Photoshop中不受支持的格式。 将脚本下载到此工具,然后复制到Adobe Photoshop/presets/scripts
文件夹。
使用SVG扩展名重命名矢量层名称(例如,layer1变为layer1.svg),现在您可以从File> Scripts> PS to SVG运行脚本。
您是否知道使用SVG可以为图像添加诸如色相,饱和度,模糊,线性色彩叠加等效果? 这是一个可视化这些效果的工具,然后为您提供了一个片段 ,可轻松将效果嵌入到项目中。
![](https://i-blog.csdnimg.cn/blog_migrate/6d10877b5ef54064a78a381acb92abe7.png)
SVG Morpheous是一个JavaScript库,允许您将SVG图标从一种形状变形为另一种形状 。 您可以设置缓动效果,过渡动画的持续时间以及旋转方向。
![](https://i-blog.csdnimg.cn/blog_migrate/9cb67b97758b5f733de209463856e1c2.gif)
SVG允许您单击带有Shape的图像片段。 如果形状为正方形或圆形,则这非常容易。 但是, 如果形状是具有很多点的形状或多边形形状呢? 那就是您需要此“剪切路径生成器”工具的地方。
![](https://i-blog.csdnimg.cn/blog_migrate/6aaa3fe85fab779390e0ebb7efec38b9.png)
Chartist.js是一个用于创建高度可定制的响应式图表的库。 它利用SVG来显示图表,也可以使用SMIL对其进行动画处理。 使用此库,您可以创建折线图,饼图,条形图和其他类型的图表,甚至可以向其中添加动画 。
这是一个使用SVG stroke-dasharray
生成虚线的简单工具。 首先从列表中选择一种破折号类型,然后根据宽度,高度,旋转度或颜色对其进行自定义。 之后,您可以获取HTML代码和CSS,以在项目中应用此虚线。
![](https://i-blog.csdnimg.cn/blog_migrate/b791a54bc6301dd0425418e100761374.png)
Method Draw是基于Web的SVG编辑器, 在画布的两面都带有直观的界面和工具 。 您可以绘制线条,形状,输入文本或使用内置形状,然后编辑绘制对象的属性。 以SVG格式(也以SVG base64格式提供)导出图像,或直接保存为PNG。
![](https://i-blog.csdnimg.cn/blog_migrate/82a3dd4fd77b944f3b2a1d69b89afcd5.png)
尽管它不再流行,但是有些人还是很难摆脱Flash。 如果是这样,您可以将Flash动画转换为SVG,以使其与更新的技术兼容 。 该工具是Flash应用程序的扩展,可以在CS5,CS6和CC上运行。
当涉及到“形状”,“位图符号”,“经典补间”和“补间”时,您可以导出到SVG中(对于其他人,可以说是成功的)。