SVG
在前面,我们已经向大家介绍了如何使用 HTML 5 中的 Canvas 元素来进行图形的绘制。
实际上,在 Canvas 诞生之前,有很长一段时间都是使用 SVG 来绘制图形的。所以在本小节中,我们将为大家简单介绍一下如何使用 SVG 来绘制图形。
SVG 简介
SVG 意为可缩放矢量图形。它是使用 XML 格式来定义的图像。通过 SVG 画出来的图形为矢量图,所以 SVG 图像在放大或者改变尺寸的情况下图形的质量不会有所损失。
SVG的历史和优势
在 2003 年 1 月 14 日,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比,使用 SVG 的优势在于:
- SVG 可被非常多的工具读取和修改(比如记事本)。
- SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
- SVG 是可伸缩的。
- SVG 图像可在任何的分辨率下被高质量地打印。
- SVG 可在图像质量不下降的情况下被放大。
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)。
- SVG 可以与 Java 技术一起运行。
- SVG 是开放的标准。
- SVG 文件是纯粹的 XML。
- SVG 的主要竞争者是 Flash。
与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。
SVG 实例
下面我们来快速演示一个 SVG 的示例,创建一个 1.svg 的文件,文件中的代码如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
这里简单解释一下每句代码所代表的含义:
- 第一行包含了 XML 声明。standalone 属性规定此 SVG 文件是否是独立的,或含有对外部文件的引用。standalone="no" 意味着该 SVG 文档会引用一个外部文件,也就是下面的 DTD 文件。
- 第二三行引用了外部 DTD 文件,位于
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
。可以看出,该 DTD 文件是 W3C 所定义的,里面含有所有允许的 SVG 元素。 - SVG 代码以 svg 元素开始,包括开启标签
<svg>
和关闭标签</svg>
,这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性定义所使用的 SVG 版本,xmlns 属性可定义 SVG 的命名空间。 - SVG 的 circle 标签用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这 2 个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
- stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2 px 宽,黑边框。fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
- 关闭标签的作用是关闭 SVG 元素和文档本身。
注意:所有的开启标签必须有关闭标签!
在 HTML 中嵌入 SVG 图像
除了通过浏览器直接打开 SVG 文件,我们还可以将 SVG 图像嵌入到 HTML 代码里面,示例如下:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>
或者将 img 标签的 src 属性设置为一个 SVG 文件的路径,如下:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<img src="./1.svg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
</body>
SVG 绘制简单图形
SVG 有一些预定义的形状元素,可被开发者使用和操作:
矩形:rect
圆形:circle
椭圆:ellipse
线:line
折线:polyline
多边形:polygon
路径:path
这里只介绍了一些简单的 SVG 图形,更多内容可以参阅:http://www.runoob.com/svg/svg-tutorial.html
SVG 矩形
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>
代码说明:
- rect 元素的 width 和 height 属性可定义矩形的高度和宽度。
- style 属性用来定义 css 属性。
- css 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)。
- css 的 stroke-width 属性定义矩形边框的宽度。
- css 的 stroke 属性定义矩形边框的颜色。
SVG 圆形
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
代码说明:
- cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0)。
- r 属性定义圆的半径。
SVG 椭圆
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代码说明:
- cx 属性定义圆点的 x 坐标。
- cy 属性定义圆点的 y 坐标。
- rx 属性定义水平半径。
- ry 属性定义垂直半径。
SVG 线条
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代码说明:
- x1 属性在 x 轴定义线条的开始。
- y1 属性在 y 轴定义线条的开始。
- x2 属性在 x 轴定义线条的结束。
- y2 属性在 y 轴定义线条的结束。
SVG 折线
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
</svg>
代码说明:
- points 属性定义折线中每个点的 x 和 y 坐标。
SVG 多边形
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
</svg>
SVG 路径
<path> 标签用来定义路径。下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
上面的例子定义了一条路径,它开始于位置(250,150),到达位置(150,350),然后从那里开始到(350, 350),最后在(250,150)关闭路径。
SVG 文本
使用<text>
元素来定义文本。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" fill="red">I love SVG</text>
</svg>
SVG 滤镜
在 SVG 中,可用的滤镜如下:
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
注:可以在每个 SVG 元素上使用多个滤镜!
下面是关于高斯模糊的一个具体示例:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
代码说明:
<filter>
标签的 id 属性可为滤镜定义一个唯一的名称(同一滤镜可被文档中的多个元素使用)。filter:url
属性用来把元素链接到滤镜。当链接滤镜 id 时,必须使用#
字符。- 滤镜效果是通过
<feGaussianBlur>
标签进行定义的。fe 后缀可用于所有的滤镜。 <feGaussianBlur>
标签的 stdDeviation 属性可定义模糊的程度。- in="SourceGraphic" 这个部分定义了由整个图像创建效果。
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。在 SVG 中,有 2 种主要的渐变类型,分别为线性渐变和放射性渐变。
注:SVG 渐变必须在
<defs>
标签中进行定义。该标签是 definitions 的缩写,它允许对诸如渐变等特殊元素进行定义。
线性渐变
<linearGradient>
可用来定义 SVG 的线性渐变。<linearGradient>
标签必须嵌套在<defs>
的内部。
线性渐变可被定义为水平、垂直或角形的渐变:
- 当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变。
- 当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变。
- 当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg>
代码说明:
<linearGradient>
标签的 id 属性可为渐变定义一个唯一的名称。fill:url(#orange_red)
属性把 ellipse 元素链接到此渐变。<linearGradient>
标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置。- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
<stop>
标签来规定。offset 属性用来定义渐变的开始和结束位置。
径向渐变
<radialGradient>
用来定义放射性渐变。<radialGradient>
标签必须嵌套在<defs>
中。
具体示例如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg>
代码说明:
<radialGradient>
标签的 id 属性可为渐变定义一个唯一的名称。fill:url(#grey_blue)
属性把 ellipse 元素链接到此渐变。- cx、cy 和 r 属性定义外圈,而 fx 和 fy 定义内圈。
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个
<stop>
标签来规定。 - offset 属性用来定义渐变的开始和结束位置。
至此,我们就将 SVG 中的基本绘图知识介绍完毕。
总结
- HTML 5 中拖放元素变为了标准的一部分,通过新提供的 API 可以对任何元素实现拖放。
- 多媒体 API 允许使用 JavaScript 来控制音频和视频的播放。
- Web Storage API 允许本地存储数据,存储的方式类似于 cookie 的键值对,但是没有大小的限制。
- Canvas 元素可以用来在网页上配合 JavaScript 动态地绘制图形与文本。
- 在 Canvas 出现以前,很长一段时间都是使用 SVG 进行的图形绘制。