SVG与Canvas区别

• SVG适用于描述XML中的2D图形的语言
• Canvas随时随地绘制2D图形(使用JavaScript)
• SVG是基于XML的，这意味着每个元素在SVG DOM中都可用。你可以为每个元素添加JavaScript事件处理程序
• 在SVG中，每个绘制的形状都会被记忆为一个对象。如果SVG对象的书香发生变化，浏览器可以自动重新渲染形状。
• Canvas是一像素一像素地渲染。在画布中，一旦图形绘制好了，就会被浏览器遗忘。如果你想改变某一个的位置，整个场景都需要重新绘制，包括可能已经被图形覆盖的任何对象。
  

CanvasSVG
与分辨率相关(可以理解为位图，图形放大会失真看到一个个像素点)与分辨率无关(可以理解为矢量，图形放大不会失真)
不支持事件处理程序支持事件处理程序
文字呈现功能比较简单最适合具有大型渲染区域地应用程序(如Google地图)
可以将生成的图像保存为.png或.jpg如果复杂地话渲染速度慢(其实任何使用DOM的东西都会很慢)
非常适合图形密集性游戏不适合游戏应用程序

1. svg width="100" height="100">
   
2.   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   
3. </svg>   //描边绿色，填充黄色的圆，半径40px
   
4. <canvas id="myCanvas" width="200" height="100"></canvas> //通过脚本(通常是JavaScript) 动态绘制图形

复制代码