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