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 的优势
使用 SVG 相对于其他图像格式（如 JPEG 和 GIF）的优势在于
- SVG 图像可以使用任何文本编辑器创建和编辑
- SVG 图像可以被搜索、索引、脚本化和压缩
- SVG 图像是可缩放的
- SVG 图像可以以任何分辨率高质量打印
- SVG 图像是可缩放的
- SVG 图形在缩放或调整大小时不会损失任何质量
- SVG 是一个开放标准
- SVG 文件是纯 XML
它是如何工作的？
SVG 具有用于矩形、圆形、椭圆、线条、多边形、曲线等的元素和属性。
SVG 还支持滤镜和模糊效果、渐变、旋转、动画、JavaScript 交互等。
一个简单的 SVG 文档由 <svg> 根元素和几个基本的形状元素组成，它们共同构建一个图形。
创建 SVG 图像
SVG 图像可以使用任何文本编辑器或绘图程序（如 Inkscape）创建。
为了让您学习 SVG 的概念和基础知识，本教程将仅使用纯文本来教授您 SVG。
下一页将展示如何将 SVG 图像直接嵌入 HTML 页面！
