什么是SVG以及如何使用

什么是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">

基本形状

1. 矩形
2. 圆形
3. 椭圆
4. 线条
5. 折线
6. 多边形
7. 路径

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