它山之石

Tashan stone of

案例
免费获取策划方案多一份参考,总有益处

它山之石

8个最好的SVG免费库

来源:派臣科技|时间:2019-08-09|浏览:

所有现代浏览器都支持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库来进行测试。

留言

返回顶部

君
派臣子站:重庆网站公司重庆网站建设重庆做网站重庆网站设计重庆网站制作重庆建网站重庆建站重庆网页制作重庆网页设计重庆网站开发重庆网站建设公司重庆网页设计公司重庆建站公司重庆建网站公司重庆网站制作公司重庆网页制作公司重庆做网站公司重庆网站设计公司重庆网站开发公司