canvas与svg区别

HTML5新特性之五——SVG绘图

 

Canvas绘图

SVG绘图

绘图类型

位图

矢量图

缩放

失真

不失真

颜色细节

丰富

不够丰富

应用领域

照片、游戏

统计图、图标、地图

内容

JS绘制

每个图形都是标签

事件绑定

不方便

方便

 

Scalable Vector Graphiph,可缩放的矢量图,此技术在2000年就已经存在了,独立于网页的一门技术;HTML5之后,纳入了HTML5标准标签库,并进行了一定的瘦身。

SVG技术的使用方法:

(1)HTML5之前的使用方法:

  SVG标签不属于HTML4或XHTML标签,只能编写在独立的XML文件中,首先编写一个SVG文件(本质是一个XML文件),然后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件

(2)HTML5之后的使用方法——H5已经把SVG标签采纳:

  在HTML文件中直接使用SVG相关标签即可

  <svg>默认为300*150的inline-block</svg>

posted @ 2017-08-16 20:04  追忆枉然  阅读(139)  评论(0编辑  收藏  举报