HTML5根基之SVG教程-
SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形，运用 XML 格局定义图形。SVG 图像在放大或转变尺寸的状况下其图形质量不会有所亏损。此外SVG 是万维网同盟的规范，SVG 与诸如 DOM 和 XSL 之类的 W3C 规范是一个整体。 2003 年一月，SVG 1.1 被确立为 W3C 规范。与其他图像格局比拟，运用 SVG 的优势有下列几点：
1.SVG 可被非常多的工具读取和修改（比方记事本） 2.SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可紧缩性更强。 3.SVG 是可伸缩的 4.SVG 图像可在任何的辨论率下被高质量地打印 5.SVG 可在图像质量不下落的状况下被放大 6.SVG 图像中的文本是可选的，同时也是可搜寻的（很适合制作地图） 7.SVG 可以与 Java 技术一起运转 8.SVG 是开放的规范 9.SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash,与 Flash 比拟，SVG 最大的优势是与其他规范（比方 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
二.SVG 实例
下面的例子是一个简略的 SVG 文件的例子。SVG 文件必需运用 .svg 后缀来保留：
能依据以前的圆形遐想到，rect元素会在屏幕上绘制一个矩形 。其实只有6个根本属性就可以控制它在屏幕上的位置和外形。
ellipse 标签可用来新建椭圆。椭圆与圆很类似。不一样之处在于椭圆有不一样的 x 和 y 半径，而圆的 x 和 y 半径是雷同的。
line 标签用来新建线条
polygon 标签用来新建含有不少于三个边的图形。它们都是由连贯一组点集的直线形成。polygon的途径在最后一个点处主动回到首先个点。需要注意的是，矩形也是一种多边形，要是需要更多灵便性的话，你也可以用多边形新建一个矩形。
polyline 标签用来新建仅包括直线的外形。它是一组连贯在一起的直线。由于它可以有许多的点，折线的的所有点位置都放在一个points属性中：
点集数列。每个数字用空白符、逗号、终止下令或者换行符分隔开。每个点必需包括2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。途径绘制完后闭合图形，所以终究的直线将从位置(2,2)连贯到位置(0,0)。
四.SVG 滤镜简介
所有互联网的SVG滤镜定义在 < defs > 元素中， < filter > 标签用来定义SVG滤镜， < filter > 标签运用必需的ID属性来定义向图形利用到阿谁滤镜中。在 SVG 中，可用的滤镜有：
feBlend SVG 滤镜。运用不一样的混合模式把两个对象合成在一起。 feColorMatrix SVG 滤镜。利用matrix转换。 feComponentTransfer SVG 滤镜。施行数据的 component-wise 重映照。 feComposite SVG 滤镜。 feConvolveMatrix SVG 滤镜。 feDiffuseLighting SVG 滤镜。 feDisplacementMap SVG 滤镜。 feDistantLight SVG 滤镜。 Defines a light source feFlood SVG 滤镜。 feGaussianBlur SVG 滤镜。对图像施行高斯依稀。 feImage SVG 滤镜。 feMerge SVG 滤镜。新建累积而上的图像。 feMorphology SVG 滤镜。 对源图形施行"fattening" 或者 "thinning"。 feOffset SVG 滤镜。相对与图形的目前位置来挪移图像。 fePointLight SVG 滤镜。 feSpecularLighting SVG 滤镜。 feSpotLight SVG 滤镜。 feTile SVG 滤镜。 feTurbulence SVG 滤镜。
注释：您可以在每个 SVG 元素上运用多个滤。
（一）SVG 高斯滤镜
< filter > 标签必需嵌套在 < defs > 标签内。< defs > 标签是 definitions 的缩写，它允许对诸如滤镜等特别元素进行定义。
SVG代码：
当 x1 和 x2 不一样，且 y1 和 y2 不一样时，可新建角形渐变
< radialGradient > 用来定义放射性渐变。
< radialGradient > 标签的 id 属性可为渐变定义一个独一的名称，fill:url(#grey-blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的色彩范畴可由两种或多种色彩组成。每种色彩通过一个 < stop > 标签来规定。offset 属性用来定义渐变的开端和完毕位置。
以上就是HTML5根基之SVG教程的细致内容，更多请关注 百分百源码网 其它相干文章！
