W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

SVG 教程


SVG
SVG

SVG 意为可缩放矢量图形。

SVG 使用 XML 格式定义图像。


每章实例

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

SVG Example

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
尝试一下 »

学前准备

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

  • 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图像通常更为方便。