简介
SVG 是一种 XML 语言，类似于 XHTML，可用于绘制矢量图形，例如下图所示。它可以通过指定所有必要的线条和形状，或通过修改已有的栅格图像，或通过两者的组合来创建图像。图像及其组件还可以进行变换、合成或滤镜处理，以完全改变其外观。
SVG 于 1999 年问世，此前有几个竞争格式被提交给 W3C 并未能完全批准。SVG 得到了所有主要 浏览器 的支持。缺点是加载 SVG 可能会很慢。SVG 确实提供了优势，其中一些包括拥有可用的 DOM 接口，并且不需要第三方扩展。是否使用它通常取决于您的具体用例。
基本要素
HTML 提供了用于定义标题、段落、表格等的元素。同样，SVG 提供了用于圆形、矩形以及简单和复杂曲线的元素。一个基本的 SVG 文档除了根元素 <svg> 和构建图形的几个基本形状之外，别无他物。此外，还有一个 <g> 元素，用于将几个基本形状组合在一起。
从这个基本结构开始，SVG 图像可以变得任意复杂。SVG 支持渐变、旋转、滤镜效果、动画、与 JavaScript 的交互等。但所有这些额外的语言功能都依赖于这一相对较小的元素集来定义图形区域。
开始之前
有许多可用的绘图应用程序，例如 Inkscape，它们是免费的，并使用 SVG 作为其原生文件格式。但是，本教程将依赖于可靠的 XML 或文本编辑器（任您选择）。目的是教授那些想了解 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 规范所取代，该规范于 2018 年成为候选推荐标准，是当前标准。SVG 2.0 遵循与 CSS 类似的方法，将组件拆分为几个松散耦合的规范，例如 SVG strokes、SVG paths 和 SVG markers。
除了完整的 SVG 推荐标准外，W3C 的工作组于 2003 年推出了 SVG Tiny 和 SVG Basic。这两个配置文件主要面向移动设备。第一个，SVG Tiny，应该为功能较弱的小型设备提供图形原语。SVG Basic 提供了许多完整 SVG 的功能，但省略了那些难以实现或渲染开销大的功能（如动画）。2008 年，SVG Tiny 1.2 成为 W3C 推荐标准。
曾有关于 SVG Print 规范的计划，该规范将增加对多页和增强色彩管理的支持。这项工作已被中止。