canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求。但 canvas 和 webGL 毕竟是偏向底层的绘制引擎，某些场景使用起来还是过于繁琐的，不分场合一律使用锤子解决的行为不值得提倡。svg 在解决排版，图标，相关动画还是非常高效的，而且 svg 还是矢量图形，高清还原各种屏幕尺寸的设计简直就是神器。
svg 基础知识不再讲解，结合svg特点和应用场景，主要介绍如下几方面的内容
svg sprite
css background-image 插入svg
文字路径
路径动画
SVG spriteSVG sprite 之于 font-face 的优势就是矢量图的抗锯齿效果，再也不需要为适配高清屏而操心。使用方式就是 svg 标签结合 symbol元素即可，其中 svg 是容器，而symbol 则是组件模板。怎么把svg组件显示出来呢？使用 use 元素指向组件的id即可，如下所示：
<svg> <symbol> <!-- svg元素或组合 --> </symbol> <!-- ... --> </svg> <use href="#ok"/>当然网上有很多工具可以帮我们把图标自动sprite，比如：iconfot，gulp-svg-symbols
在css中插入svgSVG 添加到网页中有多种方法，最常见的是：
在 HTML 中内联
object、 iframe 或 embed 标签插入
img 标签
CSS background-image 属性
html 内联方式
<svg> <title>line</title> <line x1="20" y1="20" x2="100" y2="100"> </svg>使用 object、iframe 或 embed 标签插入
<object data="http://www.likecs.com/flag.svg" type="image/svg+xml"></object> <iframe src="http://www.likecs.com/flag.svg" frameborder="0"></iframe> <embed src="http://www.likecs.com/flag.svg" type="" />使用img标签插入
<img src="http://www.likecs.com/flag.svg"/>现在重点介绍一下使用 css background属性插入的方式；既可以使用图片路径也可以使用 base64 格式的data URI 方式
.svg-bg { background-image: url("./bg.svg"); } .svg-background { background-image: url("data:image/svg+xml;<DATA>"); }我认为使用 background base64 引入svg是最具灵活性的一种方式，还可以加入svg动画，不需要额外加载图标，只需引入css即可。同时跟普通图片相比它又有着抗锯齿的优势，因此元素尺寸随意调整不担心失真。比如下面使用background data URI 引入的加载动画css：
<style> .loading{ width: 50px; height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 40a30 30 0 1130 30' stroke-width='4' stroke='hsl(220,90%,60%)' fill='none'%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1.4s' type='rotate' from='0 40 40' to='360 40 40' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") no-repeat center / cover; } </style> <body> <div></div> </body>