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库来进行测试。

你可能感兴趣的:(SVG类库)