8个最好的SVG免费库

所有现代浏览器都支持SVG文件类型，它很快就成为网站设计人员的首选。

您可以设计漂亮的图标作为支持向量机，并缩放到任何大小，而不损失质量。考虑到视网膜显示器的发展，这是SVG格式的最大优点之一。

如果你想动画或操纵你的svg，这将需要更多的工作。但是，如果您愿意卷起袖子，亲自动手编写一些代码，这些免费库提供了最好的工具。

1. SVG.js

我要推荐的第一个库是SVG.js。当然，这是完全免费和开源的，可以在任何类型的web项目中使用。

当gzip压缩时，它非常轻量级，总共只有16KB，缩小后大约是62KB。虽然这是一个相当大的整体，但与类似的库相比，它是在较小的方面。

安装是相当简单的支持npm和整个页面专门用于开始。

文档中的每个页面都有大量的JS和HTML代码供您浏览和开始。此外，您还可以找到托管在JSFiddle上的嵌入式演示程序，以了解这个库是如何工作的。

2. Snap.svg

另一个流行的SVG库是Snap.svg。它是一个JavaScript库，没有依赖关系，在Slack这样的网站上运行着一个相当大的支持社区。

目前该项目处于v0.5.1版本中，因此在完整的v1.0版本发布之前还有很长的路要走。

我仍然认为它已经为商业使用做好了准备，因为它在每个版本中都进行了大量的bug测试，并且构建它可以跨任何类型的SVG工作。这包括从Illustrator、InkScape或HTML中硬编码的SVGs导出的文件。

查看演示页面，了解Snap的功能。

3.Bonsai.js

对于更通用的图形库，我强烈推荐Bonsai.js。它已经存在多年了，它是维护得比较好的项目之一，拥有一群核心支持者。

这允许您使用SVGs和canvas元素构建一些非常酷的东西。您可以为登录页面或更复杂的图形(如饼图)设计小图标。

更不用说你可以完全控制svg中的路径以及动画效果使用盆景库中的关键帧。

浏览一些现场演示的示例页面，并访问在线文档，开始您的第一个盆景图形。

4. Paper.js

js自称是矢量图形脚本的瑞士军刀。在很多方面，这是正确的钱。

默认情况下，Paper.js工作在HTML5 canvas元素之上，有自己的DOM模型可以操作。您可以在代码中编辑bezier曲线，即使使用基本的脚本也可以提供更多的控制。

如果你想看看他们的例子，可以看看他们的例子页面。

我认为这更像是一个画布操作库，而不仅仅是一个自定义动画或SVG库。但它绝对是强大的，对于任何进入网络svg的人来说都是一个很好的选择。

5. 拉斐尔

这里有一个用于图形操作和SVG脚本的经典JS库。Raphael在MIT许可下是完全免费的，可以在GitHub上下载。

在撰写本文时，它目前在v2.2.1中，并且有相当多的贡献者。所有代码都运行在纯JavaScript中，但如果您喜欢更快的编码，可以使用TypeScript。

页面上的每个图形都有自己的DOM部分，可以像DOM元素一样进行操作。Raphael中的自定义函数使其成为一个非常适合初学者学习HTML5 canvas的库。

如果你深入到主站点，也会发现一些疯狂的演示。

6. Two.js

js脚本是一个用JavaScript构建的自定义2D绘图API。

这并不仅仅适用于画布元素，尽管它最适合于那些类型的布局。但是您可以使用tw .js来操作web上的一些常见格式:SVG、Canvas和WebGL。

对于不太熟悉JavaScript的人来说，Two.js的学习曲线更陡。这是因为您可以使用这个库做很多事情，而且这些特性似乎无穷无尽。

但是只要看一下示例页面，您就会知道有多少是可能的。

7. Velocity.js

js库在技术上是一个免费的动画库，但是它支持支持SVGs，这使得它成为所有UI/UX动画的理想选择。

您还可以使用jQuery运行Velocity，或者使用普通的JS运行Velocity。

如果你浏览主页，你会找到所有你需要的设置信息，以及每种类型动画的文档。它们中的大多数甚至在CodePen上有演示，所以您可以看到它们在浏览器中是如何工作的。

如果您想为网站创建实用的动画，请坚持使用Velocity。我特别推荐它用于基本的页面UX运动或更复杂的微交互。

8. Vivus.js

使用vivs .js，您可以构建一种非常特殊的动画类型:绘制的轮廓效果。

在SVG图像中经常可以看到这种情况。SVG路径可以一次动画显示一个点，这样看起来整个图形都是手工绘制的。

这是一个非常整洁的效果，使用Vivus非常容易设置。虽然这不能从根本上改善用户体验或提高可用性，但它确实是一个非常有趣的库。

特别是如果你是一个全新的SVGs，你想要一个简单的JS库来进行测试。