SVG教程.docx
- 文档编号:6649613
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:24
- 大小:305.40KB
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元素上使用多个滤镜! 必须在 高斯模糊(GaussianBlur) 请把下面的代码拷贝到记事本,然后把文件保存为"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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- SVG 教程