本文列举了10个网站，它们以独特和技术性的方式使用SVG，展示了SVG在Web设计中的潜力。从瓦克工作室的优雅动画到SVGPorn的徽标库，每个示例都强调了SVG在缩放、动画和交互性方面的优势。例如，Horizon网站的SVG场景和React Icons的数学生成图形展示了SVG与JavaScript和React的结合。同时，Cuberto和Fleximize Squad的SVG动画则呈现了精致的视觉效果和用户体验。
svg嵌套svg
可缩放矢量图形（SVG）不需要Web设计人员介绍。 它们可以快速缩放，可以很好地播放动画，它们是图标的强大格式等等。 这篇灵感文章是Envato Tuts + 正在进行的系列文章的一部分，汇集了十个网站的列表，这些网站以技术或创造性的方式鼓舞了SVG。
瓦克
Waark是一家富有创意的网络工作室，以创建优雅且功能强大的定制设计网站而自豪。 首次发布时，它利用Canvas（当然还有SVG）的所有出色的尖端运动席卷了整个社区。
我最喜欢的动作是在这些类型的加载序列中发生的，其中中间的图形在页面加载时就栩栩如生，并且继续微妙的移动。 还需要注意的是，大多数SVG动画都使用GreenSock库。 请务必观看由I Hate Tomatoes解构的这段视频，进一步详细介绍：
Supremo的字词
类型字词是一个动画的印刷备忘单。 如果您是印刷术的新手，或者只是想刷新自己的记忆，“输入字词”将是您的理想选择。
SVG真正令人鼓舞的用法来教授印刷术术语。 本课程的每个字符都需要引起人们的注意，即讨论的术语，使您可以轻松地确定正在呈现的内容。 尽管我认为该网站在技术上并不具有启发性，但我发现它的使用非常有创意。 许多SVG运动示例都是拆分的，使用CSS进行运动。
库贝托
Cuberto是一家总部位于英国的数字创意机构，是一个对设计和运动敏锐的团队。 Cuberto网站使用SVG的方式非常好。 从简单的字母移动到微小的鼠标指示器（可让用户深入了解滚动）。
每个字母的运动都是100％SVG。 Cuberto利用遮罩来使每个字符形式具有独立的纹理。 一个非常鼓舞人心的网站，创造性地使用了SVG和运动。 最后要说明的是GreenSock狂热者会很高兴知道GSAP正在使用中。 太棒了
地平线
他们将Horizon称为“实时JavaScript后端”，它可以帮助您使用简单的API快速构建和部署。
关于此站点的最喜欢的部分，实际上是唯一使用SVG的地方，是包含移动场景的屏幕。 这将使用GSAP以及一系列的掩码和剪切路径。 我真的很喜欢发现的另一个方面是您可以将SVG嵌套在SVG中！ 惊人！
SVG色情
您想要优质的SVG徽标时该去哪里？ SVG Porn当然！ 为开发人员，发行商和设计师提供了大量徽标，涵盖了广泛的类别。
它简单，直观且切合实际。 SVG Porn提供了一个SVG徽标（包括上述熟悉的示例）的空间，这些徽标已向公众开放，并进行了优化（删除了重复的路径，没有过多的分组，没有空的defs，lint等），并且可以在GitHub上使用 。
React图标
这个特定的工具展示了如何使用SVG，JavaScript和React创建数学生成的图形。
使用每个滑块，用户可以更新SVG路径点，甚至可以更改直径。
这用于创建像素完美的，数学上衍生的图形，这些图形大多数应用程序无法正确实现。 我喜欢这些工具，它们可以在您更新代码时实时显示代码，并且在移动每个滑块时随着图形的变形和形状的变化几乎像魔术一样。 真正的启发和真正的梦幻。
灵活小队
Fleximize是一家向小企业提供金融贷款的公司，其使命是彻底改变商业资金的世界。
Fleximize Squad是一种完全基于SVG动画的有趣体验。 通过三个相互关联的故事，用户可以使用一种巧妙的方式来申请贷款。
这个令人振奋的站点将音频与SVG运动结合在一起，当然，还使用了GreenSock。 这是一种非常线性的体验，因此不要指望该怪物会按下“后退”按钮，但这仍然是一个很棒的示例，您可以在打开DevTools检查器的情况下享受数日。
Mo.js
由Mo.js项目LegoMushroom是为Web创建快速，如丝般光滑的动画和特效库。
我发现这个项目真正令人鼓舞的是在运动中使用了物理技术，例如模糊，弹跳等等，而且它是开源的，任何人都可以为改进引擎盖下的代码做出贡献。 我是否提到过它还结合了音频？ 立即检查该项目！
演示： https : //github.com/legomushroom/mojs#demos
Trulia：简历出租
Trulia是一种移动和在线房地产资源，可通过向买方，租赁者和卖方提供他们所需的见解来做出有关居住地点的明智决定，从而找到房屋。
有时最令人满意的动作是那些微妙的动作，在这种情况下，这正是吸引我注意的地方。 这个SVG动画（由Jon Campos设计，由Sarah Drasner动画）确实传达了提交简历的想法，并直观地介绍了提交表单的难易程度。 真是太棒了，这就是SVG和GreenSock。
SVG生成
想要下一个项目的一些杀手级SVG模式吗？ SVG Generation是在下载之前进行定制和自定义的好地方。 从复杂的曲折形，线圈，立方体，条形等创建任何东西。 甚至是蓝色牛仔裤 ：
自定义参数，例如笔触颜色，大小和填充。 一个杀手级项目，也在GitHub上开源 。 您可以结识Philip Rogers并基于Lea VerouCSS3 Pattern Gallery 制作的另一种出色的SVG模式制造商 。
Circulus和SVG坐标系查看器
任何了解SVG的人都知道Sara的工作。 我选择了这两个演示，因为我发现它们在各种教育意义和项目形式中都非常有用。
如果您很难理解viewBox属性的作用，那就别无所求了。 该演示将消除viewBox的奥秘，并实时向您展示这些值如何影响结果。 杰出的作品Sara！
Circulus是这些实时演示工具中的另一种，也可以用于将结果包含在项目中。 圆形菜单非常时髦，尤其是当您可以观看它们在您面前创建和定制的菜单时！
结论
如今，SVG遍布网络！ 让我们知道您在SVG上发现了哪些启发性的网站，并在Tuts +上查看以下学习资源以快速入门：
svg嵌套svg
扫一扫
980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
