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 是 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 是一个开放标准
SVG 文件是纯 XML

创建 SVG 图片

SVG 图片可以使用任何文本编辑器创建，但使用绘图程序创建 SVG 图片通常更方便，例如墨景。