最新的Web开发教程
 

SVG教程


SVG表示可缩放矢量图形。

SVG定义XML格式基于矢量的图形。


每章的例子

我们的“试一试”的主编,您可以编辑SVG,并点击一个按钮来查看结果。

SVG示例

<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

如果你想先学习这些内容,请看我们的教程主页


什么是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 (Second Edition)成为2011年8月16日W3C建议。


SVG优势

使用的SVG比其他图像格式(如JPEG和GIF)的优点是:

  • 可以创建SVG图像,并用任何文本编辑器编辑
  • SVG图像可以被搜索,索引,脚本,并压缩
  • SVG图像是可伸缩
  • SVG图像可以与高品质在任何分辨率进行打印
  • SVG图像缩放(and the image can be zoomed without degradation)
  • SVG是一种开放标准
  • SVG文件是纯粹的XML

主要竞争对手为SVG是Flash。

最大的优势SVG拥有Flash是与其他标准符合性(eg XSL and the DOM) 闪存依赖于专有技术,是不是开源。


创建SVG图像

SVG图像可以用任何文本编辑器创建,但它往往是更方便的绘图程序中创建SVG图像,比如Inkscape的