SVG 教程

SVG

SVG 意为可缩放矢量图形。

SVG 使用 XML 格式定义图像。

每章实例

使用我们的 "尝试一下" 编辑器，您可以编辑SVG，然后单击按钮查看结果。

学前准备

在继续之前，您应该对以下内容有一些基本的了解：

• HTML
• 基础 XML

如果您想先学习这些教程，请在 W3C中文网 首页查看学习。

什么是SVG？

• SVG 代表可伸缩矢量图形
• SVG 用于为Web定义基于矢量的图形
• SVG 以XML格式定义图形
• 如果缩放或调整大小，SVG 图形不会损失任何质量
• SVG 文件中的每个元素和每个属性都可以被动画化
• SVG 是W3C推荐的
• SVG 集成于与其他W3C标准（如DOM和XSL）

SVG 是 W3C 推荐标准

SVG 1.0于2001年9月4日成为W3C推荐标准。

SVG 1.1于2003年1月14日成为W3C推荐标准。

SVG 1.1（第二版）于2011年8月16日成为W3C推荐标准。

SVG 优势

与其他图像格式（如 JPEG 和 GIF）相比，使用 SVG 的优势在于：

• 可以使用任何文本编辑器创建和编辑 SVG 图像
• 可以搜索，索引，脚本和压缩 SVG 图像
• SVG 图像可扩展
• SVG 图像可以任何分辨率高质量打印
• SVG 图像是可缩放的（并且可以放大图像而不降解）
• SVG 是一个开放标准
• SVG 文件是纯XML

SVG的主要竞争对手是Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

创建SVG图像

可以使用任何文本编辑器创建SVG图像，但是通过绘图程序（如 Inkscape）创建SVG图像通常更为方便。