CSS与SVG
使用SVG 值得庆幸的事情是我们依然可以使用CSS来控制SVG的表现。比如，我们想要一个icon在一些地方显示蓝色，我们只需要改变它的颜色即可而不需要换一张新的蓝色的图片。
有两种方法来使用样式 — 内联样式和外链样式。内联样式，即把样式包裹在<style>标签里然后放到<![CDATA[ ... ]]>里面。一定要记得把样式包裹在<![CDATA[ ... ]]>里面，因为有时候 XML在解析一些特殊字符串的时候会有一些问题(比如>)。即使你没有一些特殊的字符串，也建议你使用上面的方法来写SVG的内联样式。即使用CDATA标签来包裹内联样式。
使用内联样式来操作SVG是一个非常好的实践。像这种<img>和background-image内联插入图片到话是不支持CSS3动画的 (可以看看animations部分了解更多的关于动画方面的)。background-image不支持媒体查询的(关于媒体查询可以先看看media queries这部分了解更多的关于SVG与媒体查询)。而如果把样式内联在SVG文件中就可以解决这两个问题。
如果使用外链样式的话也很容易来操作SVG图形，不过对于<img>orbackground-image就无能为力了。 如果你使用<object>来使用SVG代码，你需要在 SVG 中引入样式表（可以看看下面的代码）。 记住一点: 如果这样使用样式的话SVG可能会识别不了它的父类(比如<object>) 所以在使用object方法的时候，不要使用外链样式。 而直接在html文件中直接插入 SVGs 就不需要这么多顾虑了，想怎么做就怎么做。
JS与SVG
由于我的javascript经验不是很多，所以我这里只是分享一些如何使用使用JS 来控制SVG的小的技巧。如果你想把JS代码嵌入到SVG 文件中， 记住把代码包裹在<![CDATA[ ... ]]>中。如果是<img>或者是background-image，就不能用脚本来控制。
如果是使用外链 JS，如果你的 SVG 代码是直接插入到html的话，你可以像平常开发中使用JS控制DOM元素一样来控制SVG。如果是使用<object>你可以使用contentDocument来控制它。
SVG与响应式
在web开发中响应式图片有两种方法，一种是制作不同固定尺寸图片，然后使用媒体查询来根据不同尺寸的设备来引用不同尺寸的图片；一种是根据图片父容器尺寸来自动调整图片自身的尺寸来适应设备。
如果是使用固定尺寸的图片，需要注意的一点是：如果是使用background-image来使用SVG你需要使用background-size属性来指定尺寸。因为浏览器可能不能正确解析它从而导致一些问题出现。
动画
SVGs 动画方法给我们的选择很多：比如SVG本身的SVG动画(基于 SMIL)、CSS3动画、或者是JS 动画。使用 SVG 动画和 CSS3 动画就可以做出很多的动画效果，而使用SVG 动画更是CSS3动画不可比拟的。而使用Javascript则能使我们编写更加复杂的动画效果，比如Snap.svg就是一个专门用来操控SVG的javascript库。这里就不详细说这个js库了，可以去它的官网看看它们的实例。
SVG动画非常的强大。不过这里我并不会展开来说，因为我使用SVG动画的经验也比较少。不过当我了解它到强大之后，我可以想象它能制作出很强大的动画效果。唯一不足的是可能要花费点时间。如果你有兴趣的话，这里推荐一些非常不错的教程地址。 SVG动画简而言之就是在SVG代码中插入<animate>元素，从而可以给路径或者是形状添加动画效果。大部分浏览器都支持SVG动画，不过 Internet Explorer不支持 SVG 动画， 当然你如果想在IE上也运行动画效果，可以使用FakeSmile这个javascript库来支持IE。
SVG animation
在web开发中，会经常遇到一些图标交互动画的场景，比如鼠标滑过图标，触发并执行动画效果。从上面的内容SVG动画支持度可以知道如果使用<img>orbackground-image来使用SVG的话，是不支持SVG动画的。如果是使用 SVG 动画来编写鼠标滑过动画的话，我们需要使用begin="mouseover"和begin="mouseout"属性来触发鼠标滑过动画效果。而 CSS3 动画效果就简单多，跟我们平时使用CSS3编写动画效果一样没有什么区别，只需要使用hover属性就可以了。有一件需要注意的事情的是， 如果你编写的动画效果用的是外链样式的话，对于直接在html文件中插入SVG代码没有什么影响；如果是使用<object>来使用SVG的话，那你也需要在SVG代码中引入你的外部样式。
