前端 - 有了css3之后，我们还需要canvas还有svg吗？

Question

产生这个问题前，我先查询的是svg和canvas的区别，有一个根本的却别是：

svg可以当作xml，可以放大缩小，像html一样操作
而canvas则是一个实实在在画布，像swf那样，编辑起来不是很方便，但是效率高

从这里可以看出两者各有优劣，再后来我又看了CSS3，我发现CSS3结合了两者的长处：

1. 可以结合DOM，和svg一样容易操作
2. 渲染效率高，可以像canvas在dom上画出任意形状

那么我有这么几个问题：

1. 有了css3之后，我们还需要svg还有canvas吗？
2. 他们各自的有缺点是什么
3. 什么场合适合用CSS3，什么场合适合用svg，什么场合适合canvas
4. 目前这三者有什么知名的框架来便于操作、使用吗？
5. 他们三者目前浏览器兼容情况如何，希望能提供参考页面或者图表说明

Answer 1

1. CSS3在DOM节点多的情况下效率严重下降。
2. CSS3的旋转比canvas（2d）要好。
3. CSS3的文字渲染比canvas好。
4. canvas可以在更底层操作。
5. canvas支持webgl，可秒杀一切。
6. canvas（2d）兼容性还不错。
7. webgl兼容性坑爹，移动平台支持不好。

网页效果请用CSS3；应用、游戏、图表用canvas；如果你觉得展示数据的时候css3不够自由，canvas太麻烦可以用svg。

css3

不是很熟悉
animate.css
lesscss
还有一些用来制作css3动画的工具，不过没见到让人满意的……

canvas

cocos2d-html5
canvasengine
three.js
fabricjs

svg

用的很少，这个勉强算一个？
d3js

Answer 2

我首先想到的是svg的兼容性比css3好，svg支持IE8+，css3和html5的部分属性在ie8下不支持

其次，说css3像svg一样可以结合dom，这有点抬举它了，svg基于xml，它的结构很好，很适合修改和扩展，而如果用css3重写就是html，语义上不对不说，结构也得靠工程师自己来设计和优化，扩展性和修改能力上远不如svg。所以，复杂图形上面，svg的优势很明显，而简单的图形，可以说css3跟svg差不多。

canvas的话，因为跟js结合更紧密，所以一些逻辑操作要比css3方便太多，比如用canvas逐帧写动画和游戏，css3实现的话会更加吃力一些。

其实css3我认为依然是对css的扩展，更多是从扩展样式表现方面的考虑，从程序逻辑上来说，只能依靠模拟来实现，在这方面依附于js的canvas还是有比较大的优势。

Answer 3

canvas的操作更底层（使用WebGL的情况下） 效率更高 以后可能成为新的游戏平台

Answer 4

三者的应用场景不一样.

• css3除去文本效果,边框,圆角,多背景,多列等等,应该说主要意义在动画,过渡等效果上相比于以往css2.1做了较大的创新,这里我稍微对animation,transition,transform做了对比.

• 我这里写了一篇有关svg对比canvas的文章,或许你可以借鉴借鉴.canvas作为一项H5的新技术,凭借高效且相比于SVG更简单的特点,对于大部分的前端同学来说更熟悉.Canvas更是借着数据可视化迎来了很多人的喜爱.但是抛去浏览器,svg在许多其他场景干翻Canvas,因为资格老,而且Canvas推出的初衷只考虑在浏览器当中.不过浏览器当中,svg还是有一席之地的,比如我推荐一个svg icon库Icomoon,自定义添加svg文件,然后只需添加相应class即可轻松创建新icon.避开svg的dom短板,可以说这样的icon质量很高,可伸缩,对屏幕大小不感冒,可以说屏幕越大优势越明显.

• 综合比较看来,css3的图形部分主要意义在于"动画2D3D过渡效果",为什么打引号,是因为真正的3D大头其实在于难啃的WebGL.随着H5的兴起,浏览器的2D大头在于Canvas.css3,svg,canvas暂时谁也不能淘汰谁,除非css3自己可以画出更好的图形,而不仅仅是带来更好的动画过渡效果;而svg(后台是adobe和ms),canvas相比于css3(后两者后台应该算webkit系列)更偏重于静态,矢量图形,但是因为本质完全不一样,各有各的优点,也是一样的都无法被替代.

• 如果将来浏览器图形这方面的标准能够做得更统一,或许会有数量更少,优点更多的技术;但是目前无法做到.

Answer 5

我 确实不知道怎么回答好 只是来逛逛 ，你们加油