可缩放矢量图形（Scalable Vector Graphics, SVG）

级别： 中级

投稿者：W3C

2007 年 8 月 28 日

使用可缩放矢量图形（Scalable Vector Graphics, SVG）（一种矢量图形语言）描述两维的矢量图形。了解 SVG 特性集，并了解它与文档对象模型（Document Object Model, DOM）、层叠样式表（Cascading Style Sheets, CSS）、XHTML 等之间的关系。

Scalable Vector Graphics (SVG) 1.1 [W3C 推荐标准] 是一种用来描述两维图形的语言。它主要是一种矢量图形语言，但是可以使用某些光栅图形特性。SVG 的目标是提供一种灵活而实用的图形格式，并在冗长的 XML 中表示出来，并且已成功实现了这一目标。SVG 的特性集包括嵌套式转换、剪辑路径、羽化遮罩、光栅过滤器效果、模板对象，当然还包括可扩展性。SVG 还支持动画、缩放视图、各种图形原语、分组、超链接、结构化元数据、CSS、专用的 DOM 扩展集，并可以轻易地嵌入到其他 XML 文档中。SVG 中的某些设计选项稍有争议，包括将矢量路径表示为各属性内以空格分隔的数字列表，但是总体来说，SVG 一直是最广受欢迎的 XML 应用程序之一。 该规范曾被 翻译为多种语言。

SVG 1.1 模块化的方式与 XHTML 1.1+ 类似。这种模块化允许对 SVG 扩展，甚至可对 SVG 进行简化，正如 Mobile SVG Profiles: SVG Tiny and SVG Basic [W3C 推荐标准] 实现的一样，该标准定义了简化后的 SVG 模块集合，适合用于移动手机和个人数字助理（PDA）。 SVG 1.2 [开发阶段] 试图添加一套完整的新工具，使 SVG 除提供图形格式以外，成为成熟的应用程序平台。

参考资料

• 您可以参阅本文在 developerWorks 全球网站上的 英文原文。
  
  
• 通过实际浏览 Ogbuji 撰写的教程 在浏览器中使用 SVG 创建矢量图形（developerWorks，2006 年 9 月）和 面向浏览器的动态 SVG（developerWorks，2006 年 10 月）中的示例，了解 SVG。
  
  
• Nicholas Chase 撰写的教程 SVG－可伸缩向量图形介绍（developerWorks，2002 年 5 月）介绍了大量示例。
  
  
• The SVG Wiki 是一个协作的资源索引和讨论页面，这是一个公共的数据交换中心，可以在此共享有关该语言的各种信息。
  
  
• ZVON 的 SVG 参考资料 描述了元素之间的关系，同时提供了一些示例。
  
  
• 阅读其他 XML 标准：XML 标准索引。
  
  
• 参与任何面向 XML 的论坛： XML 专区讨论论坛。
  
  
• 加入 developerWorks 社区：developerWorks blogs。
  
  
• 查看 IBM XML 认证，了解如何成为 IBM 认证的 XML 及相关技术的开发人员。
  
  
• XML 技术文档库，访问 developerWorks XML 专区，提供了大量技术文章、技巧、教程、标准和 IBM 红皮书。
  
  
• developerWorks 技术事件和网络广播，随时关注技术最新进展。
  
  
• 使用 IBM 试用版软件构建您的下一个开发项目，可直接从 developerWorks 下载：IBM 试用版软件。
  

回页首