svg和css做同样的效果哪个比较合适

Question

Answer 1

CSS动画优缺点

优点：

• 简单、高效

• 声明式的

• 不依赖与主线程，采用硬件加速（GPU）

• 简单的控制keyframe animation 播放和暂停

缺点：

• 不能动态的修改或定义动画内容

• 不同的动画无法实现同步

• 多个动画彼此无法堆叠

另：

1) CSS3 transition强制硬件加速会加大GPU消耗，高负荷情形下将导致运行不流畅。这种情况在移动设备上尤为明显。（特殊情况下，比如当数据在浏览器主线程和排版线程之间传递产生的瓶颈也会导致不流畅）。某些CSS属性，比如transform和opacity，则不受这些瓶颈影响。Adobe在这里精心总结了这些问题。详细请戳

transition的兼容性问题是个诟病，IE10+及现代浏览器，使用起来会造成很多不便。

由于transition并不是由JavaScript原生控制（而仅仅是由JavaScript触发），浏览器无法获知如何与控制这些transition的JavaScript代码同步地优化他们。

2) keyframes animation 的动画曲线会应用到所有变化的属性上，而且手写比较复杂的动画，写起来就是噩梦。

SVG动画

优点：

1) 矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何

2) SVG对动画的支持较好，其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画

3) Javascript可以完全控制SVG Dom 元素

4) SVG的结构是XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持 ARIA 属性，使其如虎添翼。

缺点：

1) DOM比正常的图形慢，而且如果其结点多而杂，就更慢。

2) SVG 画点报表什么的，还行；在网页游戏前，就束手无策了；当然可以结合 Canvas + SVG实现。

3) 不能动态的修改动画内容

4) 不能与HTML内容集成

5) 整个SVG作为一个动画

6) 浏览器兼容性问题，IE8-以及Android 2.3默认浏览器是不支持SVG

Answer 2

实际开发中使用SVG较少，它的缺点还是很明显的，比如加载缓慢。