SVG 有什么用？

如果我告诉您 SVG 非常适合图标和图标系统，您可能不会感到惊讶。SVG 图标系统可以，也可能应该非常简单。我个人比较喜欢 直接内联这些家伙，尤其是在它们非常简单的时候。

但是还有别的用途吗？

Logo 是一个经典的例子！很多人都是从这里开始接触 SVG 的。

如果您不想内联 SVG，也可以不用。它可以是 <img> 或 background-image。

不过，这些都是非常简单的事情。从本质上讲，SVG 只是一个基于矢量的图像格式，几乎可以做任何事情。在更复杂的应用场景中，Bustle 使用 SVG 创建了非常酷的流程图。

尝试点击这些流程图，看看所有的精彩动画。SVG 非常 灵活可扩展。在上面的例子中，部分操作是 专门对 viewBox 进行动画处理。

说到交互式图表，您看到的几乎所有图表或图形都是 SVG 或以 SVG 为基础。例如，非常流行的 d3.js 库就是基于 SVG 的。使用 d3 创建的任何内容都是 SVG。事实上，大多数 图表库 都基于 d3。这里有一个 Highcharts 的例子。

图表应用场景比较偏商业。那艺术呢？！当然，SVG 也非常适合艺术创作。艺术家的创意工具，比如在他们的 Wacom 数位板或 Adobe Illustrator 上工作的插画家，可以导出他们的作品并以 SVG 格式显示。

还有一些动画库，比如 GSAP，非常擅长帮助 SVG 制作动画，并使矢量艺术家能够将他们的作品变为现实。

查看 CodePen 上 Fabio (@FabioG) 的作品 Li´l Vikings。

Greensock 有一些 非常棒的付费功能，您可能想了解一下。

SVG 非常适合小型演示图表！这是 Rachel Nabors 的一个小作品。

查看 CodePen 上 Rachel Nabors (@rachelnabors) 的作品 使用 CSS 动画的键盘按键 SVG 图表。

或者游戏！这是 Sarah Dranser 的一个作品。

查看 CodePen 上 Sarah Drasner (@sdras) 的作品 React 游戏 - 大象吃玉米。

对你来说不够实用吗？那么一个 SVG 文件可以封装交互式横幅广告所需的所有脚本和样式呢？Chris Gannon 在这里进行了解释。

还有一个我以前做过的广告演示。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的作品 Wufoo SVG 广告。

地图是另一个令人惊叹的应用场景。 amCharts 提供了许多免费地图，更不用说维基百科尤其喜欢 SVG 格式，尤其是在地理方面。

想要更多？我有一个巨大的示例合集，展示了使用 SVG 可以实现的令人惊叹的事情。

想要开始学习 SVG 吗？我正好有一本适合你的书

现在是购买的好时机，因为在未来两天内，25% 的利润 将捐赠给 RAICES

法律代表、倡导和教育项目将为德克萨斯州释放的无人陪伴儿童提供普遍代表。去年，德克萨斯州有超过 13,000 名儿童在移民法庭上没有得到代表。

👍