SVG教程.docx

SVG教程.docx

《SVG教程.docx》由会员分享，可在线阅读，更多相关《SVG教程.docx（24页珍藏版）》请在冰豆网上搜索。

SVG教程

一什么是SVG

SVG是使用XML来描述二维图形和绘图程序的语言。

什么是SVG？

∙SVG指可伸缩矢量图形（ScalableVectorGraphics）

∙SVG用来定义用于网络的基于矢量的图形

∙SVG使用XML格式定义图形

∙SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失

∙SVG是万维网联盟的标准

∙SVG与诸如DOM和XSL之类的W3C标准是一个整体

SVG的历史和优势

在2003年一月，SVG1.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使用XML编写。

SVG实例

下面的例子是一个简单的SVG文件的例子。

SVG文件必须使用.svg后缀来保存：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

stroke-width="2"fill="red"/>

运行结果：

代码解释：

第一行包含了XML声明。

请注意standalone属性！

该属性规定此SVG文件是否是“独立的”，或含有对外部文件的引用。

standalone="no"意味着SVG文档会引用一个外部文件-在这里，是DTD文件。

第二和第三行引用了这个外部的SVGDTD。

该DTD位于“http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。

该DTD位于W3C，含有所有允许的SVG元素。

SVG代码以

这是根元素。

width和height属性可设置此SVG文档的宽度和高度。

version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间。

SVG的用来创建一个圆。

cx和cy属性定义圆中心的x和y坐标。

如果忽略这两个属性，那么圆点会被设置为（0,0）。

r属性定义圆的半径。

stroke和stroke-width属性控制如何显示形状的轮廓。

我们把圆的轮廓设置为2px宽，黑边框。

fill属性设置形状内的颜色。

我们把填充颜色设置为红色。

关闭标签的作用是关闭SVG元素和文档本身。

注释：

所有的开启标签必须有关闭标签！

二SVG形状

SVG有一些预定义的形状元素，可被开发者使用和操作。

SVG形状

SVG有一些预定义的形状元素，可被开发者使用和操作：

∙矩形

∙圆形

∙椭圆

∙线

∙折线

∙多边形

∙路径

下面的章节会为您讲解这些元素，首先从矩形元素开始。

标签

标签可用来创建矩形，以及矩形的变种。

要理解它的工作原理，请把这些代码拷贝到记事本，然后保存为"rect1.svg"文件。

把此文件放入web目录中：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

rgb（0,0,255）;stroke-width:

1;

stroke:

rgb（0,0,0）"/>

代码解释：

∙rect元素的width和height属性可定义矩形的高度和宽度

∙style属性用来定义CSS属性

∙CSS的fill属性定义矩形的填充颜色（rgb值、颜色名或者十六进制值）

∙CSS的stroke-width属性定义矩形边框的宽度

∙CSS的stroke属性定义矩形边框的颜色

结果

让我们看一下另一个包含新属性的例子：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

blue;stroke:

pink;stroke-width:

5;

fill-opacity:

0.1;stroke-opacity:

0.9"/>

例子解释：

∙x属性定义矩形的左侧位置（例如，x="0"定义矩形到浏览器窗口左侧的距离是0px）

∙y属性定义矩形的顶端位置（例如，y="0"定义矩形到浏览器窗口顶端的距离是0px）

∙CSS的fill-opacity属性定义填充颜色透明度（合法的范围是：

0-1）

∙CSS的stroke-opacity属性定义笔触颜色的透明度（合法的范围是：

0-1）

结果

为整个元素定义透明度：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

blue;stroke:

pink;stroke-width:

5;

opacity:

0.9"/>

代码解释：

CSS的opacity属性定义整个元素的透明值（合法的范围是：

0-1）

结果：

最后的例子，创建带有圆角的矩形：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

height="100"style="fill:

red;stroke:

black;

stroke-width:

5;opacity:

0.5"/>

代码解释：

rx和ry属性可使矩形产生圆角。

结果

标签可用来创建一个圆。

标签

标签可用来创建一个圆。

请把下面的代码拷贝到记事本，然后把文件保存为"circle1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

stroke-width="2"fill="red"/>

代码解释：

cx和cy属性定义圆点的x和y坐标。

如果省略cx和cy，圆的中心会被设置为（0,0）

r属性定义圆的半径。

结果

标签可用来创建椭圆。

标签

标签可用来创建椭圆。

椭圆与圆很相似。

不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。

请把下面的代码拷贝到记事本，然后把文件保存为"ellipse1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

rgb（200,100,50）;

stroke:

rgb（0,0,100）;stroke-width:

2"/>

代码解释：

∙cx属性定义圆点的x坐标

∙cy属性定义圆点的y坐标

∙rx属性定义水平半径

∙ry属性定义垂直半径

结果

下面的例子创建了三个累叠而上的椭圆：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

purple"/>

style="fill:

lime"/>

style="fill:

yellow"/>

结果

下面的例子组合了两个椭圆（一个黄的和一个白的）：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

yellow"/>

style="fill:

white"/>

结果

标签用来创建线条。

标签

标签用来创建线条。

请把下面的代码拷贝到记事本，然后把文件保存为"line1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="stroke:

rgb（99,99,99）;stroke-width:

2"/>

代码解释：

∙x1属性在x轴定义线条的开始

∙y1属性在y轴定义线条的开始

∙x2属性在x轴定义线条的结束

∙y2属性在y轴定义线条的结束

结果

标签用来创建含有不少于三个边的图形。

标签

标签用来创建含有不少于三个边的图形。

请把下面的代码拷贝到记事本，然后把文件保存为"polygon1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

#cccccc;

stroke:

#000000;stroke-width:

1"/>

代码解释：

points属性定义多边形每个角的x和y坐标

结果

下面的例子创建一个四边形：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

#cccccc;

stroke:

#000000;stroke-width:

1"/>

结果

SVG标签用来创建仅包含直线的形状。

标签

标签用来创建仅包含直线的形状。

请把下面的代码拷贝到记事本，然后把文件保存为"polyline1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

white;stroke:

red;stroke-width:

2"/>

结果

标签用来定义路径。

标签

标签用来定义路径。

下面的命令可用于路径数据：

∙M=moveto

∙L=lineto

∙H=horizontallineto

∙V=verticallineto

∙C=curveto

∙S=smoothcurveto

∙Q=quadraticBelziercurve

∙T=smoothquadraticBelziercurveto

∙A=ellipticalArc

∙Z=closepath

注释：

以上所有命令均允许小写字母。

大写表示绝对定位，小写表示相对定位。

请把下面的代码拷贝到记事本，然后把文件保存为"path1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

上面的例子定义了一条路径，它开始于位置250150，到达位置150350，然后从那里开始到350350，最后在250150关闭路径。

结果

下面的例子创建了一个螺旋：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

C153334151334151334

C151339153344156344

C164344171339171334

C171322164314156314

C142314131322131334

C131350142364156364

C175364191350191334

C191311175294156294

C131294111311111334

C111361131384156384

C186384211361211334

C211300186274156274"

style="fill:

white;stroke:

red;stroke-width:

2"/>

结果

SVG滤镜用来向形状和文本添加特殊的效果。

SVG滤镜

在SVG中，可用的滤镜有：

∙feBlend

∙feColorMatrix

∙feComponentTransfer

∙feComposite

∙feConvolveMatrix

∙feDiffuseLighting

∙feDisplacementMap

∙feFlood

∙feGaussianBlur

∙feImage

∙feMerge

∙feMorphology

∙feOffset

∙feSpecularLighting

∙feTile

∙feTurbulence

∙feDistantLight

∙fePointLight

∙feSpotLight

注释：

您可以在每个SVG元素上使用多个滤镜！

必须在标签中定义SVG滤镜。

高斯模糊（GaussianBlur）

标签用来定义SVG滤镜。

标签使用必需的id属性来定义向图形应用哪个滤镜？

标签必须嵌套在标签内。

标签是definitions的缩写，它允许对诸如滤镜等特殊元素进行定义。

请把下面的代码拷贝到记事本，然后把文件保存为"filter1.svg"。

把此文件放入您的web目录：

xmlversion="1.0"standalone="no"?

>

DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN"

"http:

//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http:

//www.w3.org/2000/svg">

style="fill:

#ff0000;stro