HTML5的SVG绘图笔记1：SVG基础

SVG优点

1. 图形文件可使用任何文本编辑器创建，可读性强，易于修改。
2. 与现有技术可以互动融合，可通过JS脚本来控制SVG对象。
3. SVG图形格式方便建立文字索引，实现基于内容的图像搜索。
4. SVG图形可被高质量地打印。
5. SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
6. SVG图形格式可以用来动态生成图形。例如，可以SVG动态生成具有交互功能的地图，嵌入网页中，并显示在客户端。
7. SVG只在某些领域具有很高的使用价值，它存在缺点。

SVG缺点

1. 使用广泛性不如Flash。
2. SVG本地运行环境下的厂家支持程度有待提高。
3. 由于原始的SVG文件是遵从XML语法，导致数据采用压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。
4. 旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。

SVG绘图与canvas绘图的区别

SVG调用方式

嵌入svg元素

直接在HTML页面中嵌入svg元素。svg元素包括开始标记和结束标记，使用width和height属性设置svg元素的宽度和高度。

<svg width=" " height=" ">
 <!--绘制图形代码-->
</svg>

引用外部SVG文件

可以通过img、embed、iframe等元素，在HTML中引用外部SVG文件。在HTML中调用外部SVG文件的语法格式如下:

<img src="filename.svg" />
<embed src="filename.svg"></embed>
<iframe src="fileName.svg"></iframe>