前言：
花了些时间了解了一下svg，然而仍然不怎么了解...
第一步：直接在html代码中使用svg。
首先了解几个标签：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...>...</svg>
svg标签，需要声明namespace，是svg的根。
<defs>...</defs>
defs标签，在其中可以定义滤镜，填充等等。
<g>...</g>
g标签，一个svg标签可以包含一个或多个g标签，一个g标签可以包含一个或多个形状，g标签可以将多个形状分在一组，一同移动、变形等等。
<rect>, <circle>...
各种形状
首先就来画个矩形：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<g>
<rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);">
</g>
</svg>
样式的控制可以一起写在style属性里，也可以分开写比如：fill="rgb(0,0,255)" stroke=":rgb(0,0,0)" ...
然后改成用渐变色填充，渐变色就需要在defs标签里定义了：
<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>
然后在图形的fill属性使用这个渐变色：fill:url(#orange_red)
之后再加个滤镜，也定义在defs里：
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
同样的使用的时候：filter:url(#Gaussian_Blur)
然后再来看看动画：
动画要定义在图形里，用animateTransform标签
<rect ...>
<animateTransform attributeType="xml" attributeName="transform" type="rotate"
from="0" to="360"
begin="0" dur="5s"
fill="freeze"
/>
</rect>
最后是事件：
事件可以用onclick="..."或者addEventListener的方法，除此之外还能用set标签，不过set标签与其说是定义事件，不如说是定义变化，只是这个变化需要一个事件来触发
<rect ...>
<set attributeName="fill" to="red" begin="click"/>
</rect>
用js操作svg：
创建svg，这里就需要用createElementNS这个api：
var SVGNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(SVGNS, 'svg');
var g = document.createElementNS(SVGNS, 'g');
var s = document.createElementNS(SVGNS, 'rect');
g.appendChild(s);
svg.appendChild(g);
document.body.appendChild(svg);
然后是事件，可以用addEventListener：
s.addEventListener('click', function () {
s.setAttribute('fill', 'rgb(255,0,0)');
});
动画，也可以像操作其他元素的动画那样：
var rotate = function () {
var t = (new Date() - rotate.t)
angel = t / 10,
px = 50 + Math.abs(100 - t / 20 % 200);
// rotate的中心是g的(0,0)点，所以这里把s的中心放到(0,0)点，然后通过g的transform来移动图形位置，这样就能让图形围绕它的中心旋转
g.setAttribute('transform', 'translate('+px+',50)');
s.setAttribute('transform', 'rotate('+angel+')');
requestAnimationFrame(rotate);
}
小结：
大致了解了下创建svg，svg事件与动画的几种方式，不过想搞个复杂的滤镜就感觉很头疼，因为文档有点儿不好搞。要想玩好svg感觉还得多研究多事件，不是个容易的事儿 :)