SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG 代码以 <svg> 元素开始包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。
SVG有一些预定义的形状元素,可被开发者使用和操作:
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)
<ellipse> 元素是用来创建一个椭圆:
椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的:
<line> 元素是用来创建一个直线:
<polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。
<polyline> 元素是用于创建任何只有直线的形状: 曲线
<path> 元素用于定义一个路径。
下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
<text> 元素用于定义文本。
Z = closepath
SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:
stroke
stroke-width
stroke-linecap
stroke-dasharray
SVG可用的滤镜是:
feBlend - 与图像相结合的滤镜feColorMatrix - 用于彩色滤光片转换- 过滤阴影feSpecularLightingfeTilefeTurbulencefeDistantLight - 用于照明过滤fePointLight - 用于照明过滤feSpotLight - 用于照明过滤