svg是一种基于XML语法得图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的， SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
SVG文件可以直接插入网页，成为DOM的一部分，然后用JavaScript和CSS进行操作。
<!DOCTYPE html> <html> <head></<head> <body> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg"...</svg> </body> </html>123456上面是SVG代码直接插入网页的例子
SVG代码也可以写在一个独立文件中，然后用img/object/iframe/embed等标签插入网页。
<img src="circle.svg"> <object id="object" data="circle.svg" type="image/svg+xml"></object> <embed id="embed" src="icon.svg" type="image/svg+xml"> <iframe id="iframe" src="icon.svg"></iframe>1234CSS也可以使用SVG文件
.logo{ background:url(icon.svg); }SVG文件还可以转为BASE64编码，然后作为DateURL写入网页
<svg>标签 SVG代码都放在顶层标签<svg>之中。下面是一个例子。
<svg width="100%" height="100%> <circle id="mycircle" cx="50" cy="50" r="50"/> </svg>123\<svg>的width属性和height属性，制定了SVG图像在html元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG图像默认大小是300像素（宽）*150像素（高）。
如果只想展示SVG图像的一部分，就要指定viewBox属性。
<svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50"/> </svg>123viewBox属性的值有四个数字，分别是左上角的横坐标和纵坐标，视口的高度和宽度。上面代码中，SVG图像是100像素宽*100像素高，viewBox属性指定视口从（50，50）这个点开始。所以，实际看到的是右下角的四分之一圆。
注意，视口必须适配所在的空间。上面代码中，视口的大小是5050，由于SVG图像的大小是100*100，所以视口会放大去适配SVG图像的大小，即放大了四倍。
如果不指定width和height属性，只指定viewBox属性，则相当于只给到定SVG图像的长宽比。这时，SVG图像的默认大小将等于所在的html元素的大小。
<circle>标签 <circle>标签代表圆形。
<svg width="300" height="180"> <circle cx="30" cy="50" r="25"/> <circle cx="90" cy="50" r="25" class="red"/> <circle cx="150" cy="50" r="25" class="fancy"/> </svg>12345上面的代码定义了三个圆。 标签的cx,cy,r属性分别为横坐标、纵坐标和半径。单位为像素，坐标都是相对于<svg>画布的左上角原点。 class属性用来指定对应的CSS类。
.red{ fill:red; } .fancy{ fill:none; stroke:black; stroke-width:3pt; }SVG的CSS属性与网页元素有所不同。
fill：填充色stroke：描边色stroke-width：边宽宽度<line>标签 <line>标签用来绘制直线。
<svg width="300" height="180"> <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0); stroke-width:5"/> </svg>…
