CSS也可以使用svg
.logo {
background: url(logo.svg);
}SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。
SVG的语法
1.
SVG 代码都放在顶层标签
如果只想展示 SVG 图像的一部分，就要指定viewBox属性。
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。
如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
2.
上面的代码定义了三个圆。
class属性用来指定对应的 CSS 类。
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}SVG 的 CSS 属性与网页元素有所不同。
fill：填充色
stroke：描边色
stroke-width：边框宽度
3.
上面代码中，标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。
4.
5.
6.
7.
8.
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径
9.
肆客足球
10.
11.
圆形
12.
圆形
13.
上面代码中，patternUnits="userSpaceOnUse"表示
14.
上面代码中，xlink:href属性表示图像的来源。
15.
上面代码中，矩形会不断移动，产生动画效果。
attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
16.
上面代码中，
JavaScript 操作SVG
1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}然后，可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);上面代码指定，如果点击图形，就改写circle元素的r属性。
2. 获取 SVG DOM
使用
