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>