SVG

SVG的嵌入方法：

1. 作为图片使用<img>标签嵌入:<img src="mySVG.svg" alt="" />
2. 作为CSS中的背景图片嵌入:.el {background-image: url(mySVG.svg);}
3. 作为对象使用<object>标签嵌入:<object type="image/svg+xml" data="mySVG.svg"><!-- fallback here --></object>
4. 作为框架使用<iframe>标签嵌入:<iframe src="mySVG.svg"><!-- fallback here →</iframe>
5. 使用<embed>标签嵌入:<embed type="image/svg+xml" src="mySVG.svg" />
6. 行内使用<svg>标签嵌入:<svg version="1.1" xmlns="http://www.w3.org/2000/svg" …><!-- svg content →</svg>

从引入外部SVG文件现在大部分都使用<object>标签，这个标签最大的好处是在SVG没有渲染的时候能够优雅降级，提供图片(或者文本)。当SVG因为某些原因没有加载时——比如提供的URI错误——浏览器就会展现<object>起始标签和结束标签里面的内容。

html
    <object type="image/svg+xml" data="mySVG.svg">
        <img src="fallback-image.png" alt="…" />
    </object>

如果你想实现高级的SVG特效，比如CSS或者scripting，HTML5的 <object> 标签就是你最好的选择。

因为浏览器在用它们各自的方式渲染SVG文档，所以可以用iframe来完成嵌入和展现SVG。如果你想要完全将SVG代码和脚本在主页面中分离，这会是一个很好的方法。然而，用JavaScript控制SVG图片有点困难，并且同时还会受到同源策略的限制。

转自：http://ued.ctrip.com/blog/translation-define-svg-with-css-styles-and-animation.html

原文：http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/