SVG 教程
没有了
SVG

SVG 意为可缩放矢量图形。
SVG 使用 XML 格式定义图像。
每章实例
使用我们的 "尝试一下" 编辑器,您可以编辑SVG,然后单击按钮查看结果。
SVG Example
<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
如果您想先学习这些教程,请在 W3C中文网 首页查看学习。
什么是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(第二版)于2011年8月16日成为W3C推荐标准。
SVG 优势
与其他图像格式(如 JPEG 和 GIF)相比,使用 SVG 的优势在于:
- 可以使用任何文本编辑器创建和编辑 SVG 图像
- 可以搜索,索引,脚本和压缩 SVG 图像
- SVG 图像可扩展
- SVG 图像可以任何分辨率高质量打印
- SVG 图像是可缩放的(并且可以放大图像而不降解)
- SVG 是一个开放标准
- SVG 文件是纯XML
SVG的主要竞争对手是Flash。
与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。
创建SVG图像
可以使用任何文本编辑器创建SVG图像,但是通过绘图程序(如 Inkscape)创建SVG图像通常更为方便。