什么是SVG以及如何使用

1. 背景介绍

什么是SVG

Scalable Vector Graphics (SVG) is a Web graphics language. SVG defines markup and APIs for creating static or dynamic images, capable of interactivity and animation, including various graphical effects.

可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。

2. 知识剖析

如何引入SVG图形

如果HTML是HTML5并且浏览器支持HTML5，同样可以直接嵌入SVG。然而为了符合HTML5标准，可能需要做一些语法调整。

可以通过 object 元素引用SVG文件：

<object data="image.svg" type="image/svg+xml/>

类似的也可以使用 iframe 元素引用SVG文件：

<iframe src="image.svg"></iframe>

理论上同样可以使用 img 元素，但是在低于4.0版本的Firefox 中不起作用。

SVG图形缩放

利用viewBox属性来定义画布上可显示的区域

这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍

<svg width="200" height="200" viewBox="0 0 100 100">

基本形状

矩形
圆形
椭圆
线条
折线
多边形
路径

3. 常见问题

如何快速创建SVG图形

使用常见的矢量图编辑软件，然后再导出

1. Lunacy

免费，界面简洁友好，但是功能比较单一。

2. Inkscape

免费，功能强大，但是生成SVG文件较复杂，不好进行后期处理

3. Illustrator

功能强大，界面友好，生成的SVG简洁，方便后期处理。但是软件不免费。

4. 扩展思考 (3 个问题 )

1. SVG 的适用场景？

高保真度复杂矢量文档已是并将继续是 SVG 的最佳点。它非常详细，适用于查看和打印，可以是独立的，也可以嵌入到网页中
- 百度地图

2. SVG的优缺点

SVG动画缺点：

1)DOM比正常的图形慢，而且如果其结点多而杂，就更慢。
2)SVG画点报表什么的，还行；在网页游戏前，就束手无策了；当然可以结合Canvas+SVG实现。
3)不能动态的修改动画内容
4)不能与HTML内容集成
5)整个SVG作为一个动画
6)浏览器兼容性问题，IE8-以及Android2.3默认浏览器是不支持SVG。

SVG动画优点：

1)矢量图形，不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好，无论屏幕分辨率如何
2)SVG对动画的支持较好，其DOM结构可以被其特定语法或者Javascript控制，从而轻松的实现动画
3)Javascript可以完全控制SVGDom元素
4)SVG的结构是XML，其可访问性（盲文、声音朗读等）、可操作性、可编程性、可被CSS样式化完胜Canvas。另外，其支持ARIA属性，使其如虎添翼。

3. SVG与Canvas性能比较

需要使用大尺寸的高保真图形时，优先选择SVG

需要复杂的数学计算动画时，或者动画中对象数过多时优先选择Canvas