前端 - 有了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

我 確實不知道怎麼回答好 隻是來逛逛 ，你們加油