SVG详解

SVG应用举例：http://www.html5tricks.com/tag/svg/

 

（1）简介：

SVG 指可伸缩矢量图形 (Scalable可扩展Vector矢量Graphics图形)，使用 XML 格式定义图形，在放大或改变尺寸的情况下其图形质量不会有损失，H5支持内联 SVG

【兼容：IE9及其他主流浏览器均支持】

 

（2）SVG 的优势：

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

①可通过文本编辑器来创建和修改

②可被搜索、索引、脚本化或压缩

③可伸缩的

④可在任何的分辨率下被高质量地打印

⑤可在图像质量不下降的情况下被放大

⑥可以与 Java 技术一起运行

⑦是开放的标准

⑧文件是纯粹的 XML 

 

（3）Flash与SVG区别：

SVG 的主要竞争者是 Flash

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

 

（4）Canvas与SVG区别：

都允许在浏览器中创建图形，但是它们在根本上是不同的

①SVG

一种使用 XML 描述 2D 图形的语言

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

②Canvas

通过 JavaScript 来绘制 2D 图形

Canvas 是逐像素进行渲染的，所以在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

【区别：】

                    Canvas                                                                  SVG

                依赖分辨率；                                                    不依赖分辨率；

           不支持事件处理器；                                              支持事件处理器；

           弱的文本渲染能力；                                    最适合带有大型渲染区域的应用程序（比如谷歌地图）；

  能够以 .png 或 .jpg 格式保存结果图像；

      最适合图像密集型的游戏，                              复杂度高会减慢渲染速度（任何过度使用 DOM 的应用            其中的许多对象会被频繁重绘                           都不快）；不适合游戏应用

 

（5）SVG实例解析

   SVG 文件必须使用 .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"（SVG版本）
     xmlns="http://www.w3.org/2000/svg"（xmlns命名空间）>
    <circle cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="red"/>
</svg>

 代码解析：

①第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD（文档类型定义）文件

②第二和第三行引用了这个外部的 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 命名空间

⑥创建圆：

<circle> 用来创建一个圆，cx 和 cy 属性定义圆中心的 x 和 y 坐标；如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径

⑦轮廓：stroke 和 stroke-width 属性控制如何显示形状的轮廓，把圆的轮廓设置为 2px 宽，黑边框；fill 属性设置形状内的颜色，把填充颜色设置为红色

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

【注释：】所有的开启标签必须有关闭标签！

 

 

（6）页面的SVG—-->SVG in HTML

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>（嵌入标签）、<object>（对象标签） 或者 <iframe>（内联框架）

SVG文件嵌入HTML三种方法：

①<embed> 标签

<embed> 标签被所有主流的浏览器支持，并允许使用脚本

注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

注释：pluginspage 属性指向下载插件的 URL

②使用 <object> 标签

<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

注释：codebase 属性指向下载插件的 URL

③<iframe> 标签

<iframe> 标签可工作在大部分的浏览器中
<iframe src="rect.svg" width="300" height="100">
</iframe>

 

 

（7）SVG形状

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

矩形 <rect>（rectangle矩形），圆形 <circle>，椭圆 <ellipse>，线 <line>，折线 <polyline>，多边形 <polygon>，路径 <path>

①<rect>标签

可用来创建矩形，以及矩形的变形

rect 元素的 width 和 height 属性可定义矩形的高度和宽度；style 属性用来定义 CSS 属性；fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）；stroke-width 属性定义矩形边框的宽度；stroke 属性定义矩形边框的颜色

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

【透明度：】

fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）；stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）；CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）；

【圆角：】

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

②<circle> 标签

可用来创建一个圆，cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)，r 属性定义圆的半径

③<ellipse> 标签

可用来创建椭圆，椭圆与圆很相似，不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的

<?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 属性定义垂直半径

④<line> 标签

用来创建线条

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

 代码解析：

x1 属性在 x 轴定义线条的开始；y1 属性在 y 轴定义线条的开始（x1，y1为起始点）

x2 属性在 x 轴定义线条的结束；y2 属性在 y 轴定义线条的结束（x2，y2为结束点）

⑤<polygon> 标签

用来创建含有不少于三个边的图形，points 属性定义多边形每个角的 x 和 y 坐标

<?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>

 ⑥<polyline> 标签

用来创建仅包含直线的形状，与<ploygon>多边形标签相比，<polyline>标签创建的点不闭合，而<ploygon>多边形标签创建的点会闭合

⑦<path> 标签

用来定义路径，由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形

这里分享个SVG在线编辑器------>https://c.runoob.com/more/svgeditor/

画完后，Ctrl+U即可生成代码

（8）SVG滤镜

必须在 <defs> （definitions 定义）标签中定义，它允许对诸如滤镜等特殊元素进行定义

①SVG 滤镜

用来向形状和文本添加特殊的效果

【注释：】您可以在每个 SVG 元素上使用多个滤镜！

②高斯模糊（Gaussian Blur）

<filter> 标签用来定义 SVG 滤镜，<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜

<?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" 这个部分定义了由整个图像创建效果

（9）渐变

 渐变必须在 <defs>（definitions 定义）标签中定义，可对诸如渐变之类的特殊元素进行定义

渐变是一种从一种颜色到另一种颜色的平滑过渡；另外，可以把多个颜色的过渡应用到同一个元素上

在 SVG 中，有两种主要的渐变类型：线性渐变，放射性渐变

1 . 线性渐变

<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 属性用来定义渐变的开始和结束位置

 2 . 放射性渐变

<radialGradient>（径向渐变） 用来定义放射性渐变

<?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 文件，不过需要安装插件的 Internet Explorer 除外。插件是免费的，比如 Adobe SVG Viewer（Adobe SVG查看器）

【拓展：Adobe是参与定义SVG的组织，同时还有太阳微系统、苹果公司、IBM 以及柯达】

 

 

SVG应用举例：

向矩形添加一个 "a" 元素，这样矩形就可以作为一个超级链接了 当用户在圆上面点击时，使用 JavaScript 创建一个元素 重复用 5 秒时间淡出的矩形 动态改变矩形的 x、y 以及 width、height 属性来创造出动画效果，并改变矩形的颜色 会改变颜色的三个矩形 沿一个运动路径移动的文本 沿一个运动路径移动、旋转并缩放的文本 沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形