Tutorials 参考 练习 Menu
Paid Courses

SVG 教程

SVG 代表可缩放矢量图形。

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


每章中的示例

With our "来试试吧" editor, you can edit the SVG, and click on a button to view the result.

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
  • Basic XML

如果您想先学习这些科目,请在我们的网站上找到教程 主页.


什么是SVG?

  • 主页SVG代表可缩放矢量图形
  • SVG 用于为 Web 定义基于矢量的图形
  • SVG 以 XML 格式定义图形
  • 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优势

使用 SVG 相对于其他图像格式(如 JPEG 和 GIF)的优势是:

  • 可以使用任何文本编辑器创建和编辑 SVG 图像
  • 可以搜索、索引、编写脚本和压缩 SVG 图像
  • SVG 图像是可缩放的
  • 可以以任何分辨率高质量打印 SVG 图像
  • SVG 图像可缩放
  • SVG 图形在缩放或调整大小时不会失去任何质量
  • SVG 是一个开放标准
  • SVG 文件是纯 XML

创建 SVG 图像

可以使用任何文本编辑器创建 SVG 图像,但是 使用绘图程序创建 SVG 图像通常更方便,例如 Inkscape.