SVG类库

几个基于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导出的文件。

3.Bonsai.js

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

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

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

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

• 但是它的官网在访问一直不是很友好，我打开了好多次，都是页面丢失，无法访问。

4. Paper.js

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

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

• 他的官网及其丑陋

5. Raphael

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

• 页面上的每个图形都有自己的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运动或更复杂的微交互。

• 这是我目前见到的唯一一个有中文文档的svg类库了

8. Vivus.js

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

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

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

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