SVG的基本使用在学习HTML5方面的知识时，相信很多人会遇到一个这样的情况--插入的图片太过于模糊，严重影响视觉审美。

在学习HTML5方面的知识时，相信很多人会遇到一个这样的情况--插入的图片太过于模糊，严重影响视觉审美。那么怎样才能让页面中的图片像谷歌地图的画面一样即是一直放大还是很清楚呢？那么这就是本次的主题----SVG(可伸缩矢量图形 (Scalable Vector Graphics)).

SVG的概念

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG与Canvas的区别

从SVG使用上的功能来看,它似乎与Canvas很相似,都可以在浏览器中创建图形,但是它们在根本上又是不同的,从以下几点区别即可了解这两者之间的不同:

Canvas

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

SVG

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

区别

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

SVG引用标签

SVG是基于XML的，但是同样可以通过标签来嵌入HTML文件之中,以下便对这几个标签进行介绍：

<embed>标签

在html文件之中引用<embed>标签即可编辑SVG文件,具体语法如下:

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

其中pluginspage的意思即为: 标识 Flash Player插件的位置,以便用户在未下载该插件时可以下载它.

<object> 标签

在html中引用该标签时具体语法如下:

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

其中codebase为下载插件的url地址.

<iframe> 标签

在html中引用该标签时具体语法如下:

<iframe src="rect.svg" width="300" height="100"></iframe>

除了以上几种办法之外,还可以只引用SVG的命名空间即可将SVG元素添加至html文件之中,具体实现方法如下所示:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" /></svg:svg>
</body>
</html>

SVG预定义形状标签使用

在学习SVG方面知识时,前端方面大概需要掌握SVG图形的绘制,因此必须掌握以下几个形状标签的使用.

<rect>标签

rect标签即为矩形的绘制标签,以下是使用rect标签创建一个矩形的实例,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #root{
            position: absolute;
            /* background-color: antiquewhite; */
            left: 50%;
            top: 50%;
        }
    </style>
</head>
<body>
    <svg id ="root" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" style="fill:rgb(48, 184, 150);stroke-width:1; stroke:rgb(0,0,0)"/>
    </svg>
</body>
</html>

效果图如下所示:

其中

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

<circle>标签

使用<circle>标签可以绘制一个圆形.具体实现代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #root{
            position: absolute;
            /* background-color: antiquewhite; */
            left: 50%;
            top: 50%;
            /* width:"100%";
            height:"100%"; */
        }
    </style>
</head>
<body>
    <svg id ="root" width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
    <circle cx="500" cy="500" r="100" stroke="black"stroke-width="2" fill="blue"/>
    </svg>
</body>
</html>

具体实现效果图如下所示:

其中:

cx,cy为圆的中心坐标点.
r为圆的半径

<ellipse>标签

<ellipse>标签可以用来创建椭圆,具体实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #root{
            position: absolute;
            /* background-color: antiquewhite; */
            left: 50%;
            top: 50%;
            /* width:"100%";
            height:"100%"; */
        }
    </style>
</head>
<body>
    <svg id ="root" 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(100,200,50);stroke:rgb(0,0,100);stroke-width:2"/>
    </svg>
</body>
</html>

实现效果图如下所示:

其中:

cx,cy为原点坐标
rx,ry分别为水平半径与垂直半径

4.<line>标签

<line>标签用来绘制直线,具体实现代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #root{
            position: absolute;
            /* background-color: antiquewhite; */
            left: 50%;
            top: 50%;
            /* width:"100%";
            height:"100%"; */
        }
    </style>
</head>
<body>
    <svg id ="root" 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(199,199,99);stroke-width:3"/>
    </svg>
</body>
</html>

实现效果图如下所示:

其中:

x1,x2分别定义线条在x轴的起点与终点位置.
y1,y2分别定义线条在y轴起点与终点的位置.

5.<polygon>标签

<polygon>标签用来绘制不少于三条边的图形,具体代码实现如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #root{
            position: absolute;
            /* background-color: antiquewhite; */
            left: 50%;
            top: 50%;
            /* width:"100%";
            height:"100%"; */
        }
    </style>
</head>
<body>
    <svg id ="root"width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
    <polygon points="220,100 300,210 170,250"style="fill:yellow;stroke:#000000;stroke-width:1"/>
    </svg>
</body>
</html>

实现效果图如下:

其中:

point定义多边形中每个角的x与y坐标,如上图所示,三角形共有三个角,因此在point中定义三个角的坐标即可完成三角形的绘制.

6.<polyline>标签

<polyline>标签用于绘制只有直线形状的图形,其实现代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #root{
            position: absolute;
            /* background-color: antiquewhite; */
            left: 50%;
            top: 50%;
            /* width:"100%";
            height:"100%"; */
        }
    </style>
</head>
<body>
    <svg id ="root" width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
        <polyline points="0,170 484,170 88,440 240,4 391,439 0,170" fill-opacity="0.7" fill="red"></polyline>
    </svg>
</body>
</html>

其效果图实现如下所示:

其中:

points中的数值为折线中每个点的坐标,具体操作可以想象在坐标轴内绘制出许多坐标点,然后将这些坐标点连成线之后便形成了图形.

7.<path>标签

<path>标签用于定义路径的数据,具体使用命令如下所示:

直线指令

M = moveto(定义一条路径,由x轴与y轴定位,设置起始值与终点值,例:M100 200)
L = lineto(两点一线,连线路径,同样是定义起始点与终点,例:L200 300)
H = horizontal lineto(x坐标沿着x轴移动)
V = vertical lineto(y坐标沿着y轴移动)

曲线指令

C = curveto(三次贝塞尔曲线,定义起点，xy为终点，起点和x1y1控制曲线起始的斜率，终点和x2y2控制结束的斜率)
S = smooth curveto(简化的贝塞尔曲线,如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。)
Q = quadratic Belzier curve(二次贝塞尔曲线Q)
T = smooth quadratic Belzier curveto(与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。

T命令前面必须是一个Q命令，或者是另一个T命令
如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线)

A = elliptical Arc(A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y

rx 弧的半长轴长度
ry 弧的半短轴长度)

Z = closepath(关闭路径)

总结

本人也是初次接触SVG,在初步了解Canvas绘制之后对SVG有了新的了解,但是很多方面的内容还是借助前辈的理论知识进行阐述,因此有许多阐述不严谨的地方,欢迎各位大佬指正.