SVG基础用法

上篇文章简单了解了一下SVG，下面将分析SVG的基础用法

一.简介

什么是SVG

SVG（Scalable Vector Graphics） : 可缩放矢量图形,使用 XML 格式定义图像。可以以一种简洁、可移植的形式表示图形信息，目前大部分浏览器都显示SVG图片，IE8不支持SVG。

• HTML5支持内联SVG，HTML <svg>元素是SVG图形的容器。
• SVG有多种绘制路径、框、圆、_文本和图形图像的方法
• SVG 用于定义用于网络的基于矢量的图形
• SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG是万维网联盟的标准

SVG的优势

与其他图像格式相比(比如JPEG和GIF)，使用SVG的优势在于:

• SVG图像可通过文本编辑器来创建和修改
• SVG图像可被搜索、索引、脚本化或压缩
• SVG是可伸缩的
• SVG图像可在任何的分辨率下被高质量地打印
• SVG可在图像质量不下降的情况下被放大

浏览器支持

表格中的数字表示支持该元素的第一个浏览器版本号。

Canvas和SVG的比较

Canvas是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas	SVG
依赖分辨率<br /> 不支持事件处理器<br />弱的文本渲染能力<br /> 能够以.png或.jpg格式保存结果图像 <br最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率<br /> 支持事件处理器<br /> 最适合带有大型渲染区域的应用程序（比如谷歌地图) <br/> 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快) <br /> 不适合游戏应用