SVG 教程

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

可缩放矢量图形(Scalable Vector Graphics,SVG),是 W3C 推出的基于XML的二维矢量图形标准。SVG 可以提供高质量的矢量图形渲染,同时由于支持 JavaScript 和文档对象模型,SVG 图形通常具有强大的交互能力。另一方面,SVG 作为 W3C 所推荐的基于 XML 的开放标准,能够与其他网络技术进行无缝集成。


SVG 实例

通过实例学习 SVG !SVG 实例


SVG 所有元素

本站为您提供完整的 SVG 参考手册,其中列出了所有 W3C 推荐标准(SVG Version 1.1)中的 SVG 的元素。


学习前应具备的基础知识:

继续学习之前,你应该对以下内容有基本的了解:

HTML

XML 基础

您可以点击上面的链接,选择相应的教程进行学习。


SVG 内容目录

SVG 简介

本节内容:SVG 是什么,为什么要用 SVG。

SVG 实例

本节内容:SVG 的一个简单实例。

SVG HTML

本节内容:在 HTML 中使用 SVG。

SVG 矩形

本节内容:使用 SVG 绘制矩形。

SVG 圆形

本节内容:使用 SVG 绘制圆形。

SVG 椭圆

本节内容:使用 SVG 绘制椭圆。

SVG 线条

本节内容:使用 SVG 绘制线条。

SVG 多边形

本节内容:使用 SVG 绘制多边形。

SVG 折线

本节内容:使用 SVG 绘制折线。

SVG 路径

本节内容:使用 SVG 绘制路径。

SVG 滤镜

本节内容:使用 SVG 滤镜效果。

SVG 高斯模糊

本节内容:使用 SVG 高斯模糊效果。

SVG 线性渐变

本节内容:使用 SVG 线性渐变。

SVG 放射性渐变

本节内容:使用 SVG 放射性渐变。

SVG 全部实例

本节内容:总结 SVG 的所有实例。

SVG 全部元素

本节内容:总结 SVG 全部元素。