版友们大家好！
这次我整理了一些 SVG 动画的作法及原理：
http://mzl.la/4-svg-anim-examples
文中有四个 codepen 范例，
完整的应用也可以参考文内附的 github 原始码连结。
会开始使用 SVG 动画一开始是在 GardenStudio 网站上看到描边动画，
http://gardenestudio.com.br/
发现是用 SVG 做的，于是开始研究各种 SVG 动画的用法。
基本上 SVG 在网页上使用起来不会太难，
而且能做到跟 Flash 类似的动画效果（形状渐变、导引线动画等），
也不怕缩放后会有锯齿颗粒。
可惜的是 IE9 以上才开始有静态 SVG 的支援，
且目前为止仍不支援 SVG SMIL Animation。
想要在 IE9 以上运作 SVG 动画，
只能透过 Javascript 来操作物件的属性，
或者透过额外的 Javascript 套件如 Snap.svg 等。
要使用何种作法、或是否采用 SVG，
就要看网页在哪些浏览器呈现最佳的效果囉！