SVG 教程
SVG 代表可缩放矢量图形。
SVG 使用 XML 格式定义基于矢量的图形。
SVG 图形是可缩放的，在缩放或调整大小后不会丢失任何质量。
所有主流浏览器都支持 SVG。
各章节中的示例
使用我们的“尝试一下”编辑器，您可以编辑 SVG，然后点击按钮查看结果。
SVG 示例
<html>
<body>
<h1>我的第一个 SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<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 与其他标准集成，例如 CSS、DOM、XSL 和 JavaScript
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 还支持滤镜和模糊效果、渐变、旋转、动画、与 JavaScript 的交互等。
一个简单的 SVG 文档由 <svg> 根元素和几个基本形状元素组成，这些元素将共同构建一个图形。
创建 SVG 图像
SVG 图像可以使用任何文本编辑器或绘图程序创建，例如 Inkscape。
为了让您学习 SVG 的概念和基础，本教程将仅使用纯文本来教授您 SVG。
下一页将展示如何将 SVG 图像直接嵌入 HTML 页面！
