简介

SVG 是一种类似于 XML 的语言，类似于 XHTML，可用于绘制矢量图形，例如下面所示的图形。它可以用来创建图像，方法是指定所有必要的线条和形状，修改现有的光栅图像，或者两者结合使用。图像及其组件也可以进行变换、合成或过滤，以完全改变其外观。

Mozilla dino logo

SVG 诞生于 1999 年，当时几个竞争格式被提交给 W3C 但未能完全批准。SVG 受所有主要 浏览器 支持。缺点是加载 SVG 可能很慢。SVG 确实提供了好处，其中一些好处包括为其提供了可用的 DOM 接口，并且不需要第三方扩展。是否使用它通常取决于您的具体用例。

基本要素

HTML 提供了用于定义标题、段落、表格等的元素。同样，SVG 提供了用于圆形、矩形以及简单和复杂曲线的元素。一个简单的 SVG 文档仅包含 <svg> 根元素和几个构建图形的基本形状。此外，还有 <g> 元素，用于将几个基本形状组合在一起。

从这个基本结构开始，SVG 图像可以变得任意复杂。SVG 支持渐变、旋转、滤镜效果、动画、与 JavaScript 的交互等等。但是，语言的所有这些额外功能都依赖于这套相对较小的元素来定义图形区域。

开始之前

有一些绘图应用程序可用，例如 Inkscape，它们是免费的，并使用 SVG 作为其原生文件格式。但是，本教程将依赖于可靠的 XML 或文本编辑器（您的选择）。目的是向想要了解 SVG 的人传授 SVG 的内部知识，而最好的方法是亲自动手进行一些标记。不过，您应该注意最终目标。并非所有 SVG 查看器都是相同的，因此，为一个应用程序编写的某些内容在另一个应用程序中可能不会完全相同地显示，因为它们支持不同级别的 SVG 规范或您与 SVG 一起使用的其他规范（即，JavaScript 或 CSS）。

SVG 在所有现代浏览器中都受支持，在某些情况下，甚至可以追溯到几个版本之前。可以在 Can I use 上找到一个相当完整的浏览器支持表。Firefox 从 1.5 版开始就支持一些 SVG 内容，并且从那时起，随着每个版本的发布，支持级别都在不断提高。希望通过本教程，MDN 可以帮助开发人员跟上 Gecko 与其他一些主要实现之间的差异。

在开始之前，您应该对 XML 或其他标记语言（如 HTML）有基本的了解。如果您不太熟悉 XML，请记住以下一些指南

  • SVG 元素和属性都应以此处显示的大小写输入，因为 XML 区分大小写（与 HTML 不同）。
  • SVG 中的属性值必须放在引号内，即使它们是数字。

SVG 是一个庞大的规范。本教程试图涵盖基础知识。一旦您熟悉了，您应该能够使用 元素参考 和 接口参考 查找您需要了解的任何其他信息。

SVG 的类型

自 2003 年成为推荐标准以来，最新的“完整”SVG 版本是 1.1。它建立在 SVG 1.0 的基础上，但增加了更多模块化功能以简化实现。 SVG 1.1 的第二版 于 2011 年成为推荐标准。“完整”SVG 1.2 旨在成为 SVG 的下一个主要版本。它被即将推出的 SVG 2.0 弃用，SVG 2.0 目前正在大力开发中，它采用了类似于 CSS 3 的方法，即将组件拆分为多个松散耦合的规范。

除了完整的 SVG 推荐标准外，W3C 的工作组还在 2003 年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要针对移动设备。第一个，SVG Tiny，应该为具有较低功能的小型设备提供图形基元。SVG Basic 提供了完整 SVG 的许多功能，但不包括难以实现或渲染繁重的功能（如动画）。2008 年，SVG Tiny 1.2 成为 W3C 推荐标准。

曾计划制定 SVG Print 规范，该规范将添加对多页和增强颜色管理的支持。这项工作已停止。