SVG（或可缩放矢量图形）是一种基于XML的文件格式，使开发人员和设计人员能够以极高的精度创建高质量的动态图形和图形应用程序。
所有现代浏览器都支持渲染SVG：但是，对于没有本机支持的IE6,7和8等旧版本的浏览器，您可以依赖于polyfill，例如SVG Web使用Flash渲染内容。这使您可以轻松地在线定位大多数用户，而无需担心兼容性问题。
对于想知道兼容性的移动网络开发者，我很高兴地报告iOS 3.2 +，Opera Mini 5 +，Opera Mobile 10+和Android 3+也支持开箱即用的SVG图形。由于之间存在一些相似之处
- 阅读我们所有的网页设计文章这里
01.同步动画和音频
设计师和开发人员最初蜂拥使用Flash的一个重要原因是它能够以令人尊敬的帧速率轻松创建身临其境的动画用户体验。
现在我们已经了解了在浏览器中有多强大，基于矢量的体验可以与其他多媒体（如音频标签）配对，我们可以开始创建像这个由Vincent Hardy演示：结合了SVG，JavaScript和模拟“相机”的同步音频和图形动画。 SVG实际应用的一个很好的例子 - 对于不需要第三方插件的东西来说也不错！
02.在SVG中重新创建动画世界地标
将实现任务的现有方法与新任务进行比较的真正测试之一是评估您可以在多大程度上复制已经存在的实例。
这就是马雷克·雷达（Marek Raida）在页面一角看到几个世界地标的Flash横幅并决定尝试在SVG中重新创建它时所做的事情。他努力的结果是一个轻量级演示，其文件大小比Flash替代品小33％。这个SVG的例子看起来好多了，也不难自己编写代码！
03. SVG过滤HTML5视频
虽然SVG在矢量图形领域提供了强大的功能，但它也有许多创造性的用途。在这个演示，Paul Irish（谷歌Chrome开发关系团队）演示了如何结合SVG和CSS为视频内容制作一些非常壮观的视觉过滤器。模糊效果可能是最有趣的，但其他效果，如反转帧内容也是非常有趣的概念证明。
04.为SVG图形添加第三维
每当讨论浏览器内图形渲染的主题时，就不可能避免谈论可用的2D和3D功能级别。这提出的对在线游戏的影响足以引起许多设计师和开发人员的关注，那么SVG如何帮助我们呢？
好吧，在这是SVG的下一个例子通过Nicolas Debeissat，我们展示了一种使用一些JavaScript技巧和SVG向量模拟可信的3D视角到对象的技术。请务必查看页面上的下拉菜单，因为有大量示例可用于激发您的3D胃口。
05.在SVG与Flash中渲染矢量图形
这是一个有趣的Brad Neuberg和SVG Web的SVG示例：一个JavaScript库，可以为尚未完全支持它的浏览器提供SVF支持。使用库（包括本机SVG支持），您可以立即锁定现有已安装Web基础的近95％，如果您想考虑在生产中使用SVG，这是相当可观的。
这个例子的好处在于它允许你比较使用SVG而不是Flash渲染时矢量图形的外观，但是这可以在运行时轻松切换，具体取决于浏览器对它的支持程度。对于有兴趣进一步探索SVG渲染功能的开发人员来说绝对是必看的。
06.交互式SVG拼图
当Flash第一次出现时，我们在野外看到的第一个例子是基本的谜题和游戏。接下来，这是SVG拼图的一个例子基于Flickr创建@h__r__j。它会为您提供一系列图像，让您可以根据自己的选择生成拼图。棘手的完成，但有趣和一些有趣的代码背后，尽管如此！
07. SVG UI组件：HTML5字幕栏
正如在介绍中所提到的，SVG过去曾经大量使用Flash的一个领域是基于创意矢量的用户界面。随着屏幕和屏幕分辨率的不断增加，开发人员必须能够满足高质量的UI组件，而不必担心质量会受到更高或更低分辨率的影响。这就是SVG特别有用的地方。
在这个SVG的典范中，一个交互式字幕栏连接到HTML5视频播放器，让您可以轻松地无缝切换字幕语言。
08.在HTML5视频上应用SVG掩码
几年前，我记得在一个项目中，我们不得不在嵌入式Flash视频周围应用蒙版，因此看起来视频正在一个形状像文本的块内播放。瞧，现在可以使用内联SVG，HTML5视频和一点CSS的组合来实现非常相似的效果。
这个SVG的例子，由Web开发人员创建迈克托马斯，目前仅适用于Firefox 4及更高版本，但它是一个鼓舞人心的例子，一旦我们在不同的浏览器供应商提供的更高水平的规范化之后，我们将来能够开发一些非常有创意的东西。
09.与SVG和Raphael的路径追踪地图路线
这里的一个有趣的实例SVG及其如何使您的用户体验受益。地图是我们都在网上使用的东西，但是如果我们可以轻松地绘制并沿着路线制作动画来帮助使这些旅程更加清晰一点，那么它们会不会更好？在A List Apart的这个演示中，布赖恩苏达看看在SVG通过Raphael的帮助下向地图添加自定义动画路线。
10.用SVG解构Trajan列
有趣的事实：Trajan's Column是意大利的罗马专栏，纪念罗马皇帝图拉真在达契亚战争中的胜利。在列的内侧是螺旋楼梯，有人决定使用SVG在伪3D中完全建模。
最好的部分这个例子SVG是完全交互式的，允许您选择要拉出的图形部分。这个动画解构建筑可能是我见过的SVG最有趣的用途之一，我绝对建议你去看看。
11. SVG中的动画Rube Goldberg机器
很有可能，你可能已经看到Rube Goldberg机器（RGM）在你生命中的某个时刻不知道它，可能是在卡通或科学节目中。 RGM是
故意过度设计的机器以非常复杂的方式执行简单的任务，通常包括连锁反应。
在下面的例对SVG你可以看到一架纸飞机飞过来撞击一个球，然后引发另一个连锁反应，多米诺骨牌，最后一盏灯点亮。我说这是过度设计，不是吗？！
12. SVG中的爱尔兰交互式明信片
扩展路径追踪演示，SVG-fan和全能的开发人员Marek Raida决定记录他在爱尔兰的旅行互动SVG明信片它演示了路径跟踪，大区域动画和其他效果，如旋转。
13.犯罪和贫困互动SVG地图
以一种可以被街头的日常男人或女人理解的方式可视化大量数据并不总是一件容易的事。通常不是试图解释整个数据集，而是提供多个数据视图可以更加简单，因此用户可以切换上下文以深入查看他们有兴趣查看的更大集合的子集。
在这个例子在SVG中，美国的犯罪和贫困数字在州级地图上呈现在美国地图上，但您也可以通过多种方式改变您对地图的看法，包括缩放，选择和移动。如果您有兴趣在SVG中开始使用自己的地图，Dasha Salo有一个教程这表明使用Raphael可以轻松实现这一目标。
14. SVG中的动画歌词
另一个来自“我不能相信不是Flash”类别的SVG的一个很好的例子是这个演示来自Vincent Hardy，他结合了SVG，网络字体和音频标签，创造了一个与音乐轨道同步的视觉上令人愉悦的歌词动画。另请参阅为a列出的其他示例Ghandi报价演示！
15.与Raphael和SVG进行分析
如果您以前没有使用它，Raphaël是一个JavaScript库，有助于简化在Web上使用矢量图形的工作。从IE6 +向上支持大多数浏览器，它的网站有一些使用SVG创建令人印象深刻的数据可视化的优秀示例。
我个人最喜欢的是分析演示这可以让您了解SVG在大型站点跟踪应用程序中如何轻松取代Flash。如果您对Raphael的版本感兴趣而更关注图表，您可能还想查看GRaphaël。
16. Twitter连接的视觉表示
Twings是一个工具，可以让您根据许多不同的因素将您的Twitter粉丝可视化为环。除了作为SVG的一个很好的例子之外，它还是一个有趣的例子，当你需要获得超出API通常每次请求返回的限制的每个关注者信息时，如何将请求分段到Twitter API（100）。不要忘记去Ivan Lazarevic解释他是如何创建Twings的主要网站，其中包含一些关于该工具的额外提示！
17. Blobular
Blobular是一个有趣的例子，由Cameron Adams又名为The Man In Blue的SVG，它允许你改变颜色，粘度和大小的斑点！您可以尝试将blob的边缘扩展到特定限制，并且一旦超过阈值，博客就可以实际生成其他blob。您可能不会使用它来创建下一个Google+，但它仍然是一个非常有趣的实现。
18. SVG令人毛骨悚然的嘴巴
Doug Schepers''令人毛骨悚然'实验让我们深入了解SVG中的人类口腔。你知道肺泡和肺泡的不同吗？我也没有，但这是SVG的一个完美例子，它将矢量图形与动画相结合，以帮助改进Flash过去用于科学和生物图表的方式的在线教育。
19.动画SVG时钟
在本演示中，我们有一个SVG渲染示例旋转数字时钟。我发现效果非常有趣，因为这不仅是动画文本的一个很好的例子，而且还要注意每个角色的背面是如何根据动画旋转中的位置改变颜色的。
20. IPad上的交互式SVG
正如在介绍中所提到的，可以通过DOM访问SVG图形，因此可以像对待页面上的其他元素一样将事件处理程序附加到它们。考虑到这一点，Gert-jan Van Der Wel创造了一个简单的演示演示如何在iPad上与SVG图形进行交互。如果您已经在iOS设备上玩过浏览器中的对象移动，那么很多内容对您来说都很熟悉，但对于那些尚未有机会研究它的人来说，这是一个非常有用的演示！
喜欢这个？阅读这些！
Addy Osmani是一名用户界面设计师，目前是AOL的软件工程师。他还是jQuery Bug Triage和API Docs团队的成员。他的每周UI帖子可以在AddyOsmani.com找到。
什么样的SVG使用给你留下了最深刻的印象？哪些应该成为我们的名单？让我们在评论中知道！
