当前位置主页 > 资料库 > 前端教程 > HTML5 SVG简介

HTML5 SVG简介

2015-01-05

我们称HTML5 SVG(Scalable Vector Graphics)为“被遗忘的图像格式”是有它的历史原因的。SVG一直以来都受到开发者的青睐和各种WEB社区的广泛支持。从1999年开始,SVG已经开始被人们关注。但是因为浏览器的原因,它很少被人们正式使用,其中最大的祸首是IE浏览器。下面的图片是使用SVG格式的图片,你可以缩放浏览器来看看它的矢量图效果:

Homer Simpson

现在,IE9浏览器和其他所有的现代浏览器都已经完全支持SVG了,包括它们的移动设备版本。

从SVG的缩写可以看出,它是一种矢量格式。矢量图形包含线条、描边和填充颜色等元素。SVG也可以在文字上使用。

SVG的主要优点如下:

  • SVG图形可无限放大缩小,不会因此而产生失真。
  • SVG使用XML创建,所以它是开源、可以自由使用的。你可以用像Notepad这样的文本编辑器来创建SVG图形。正因为如此,你可以在许多开源代码和开源社区中找到SVG的身影。很多网站的logo和维基百科上的许多图表都是使用SVG来制作的。
  • 因为SVG是矢量的,所以文件大小往往非常小。(SVG文件甚至可以通过gzip来进一步压缩)
  • 作为一个XML文件,SVG可以被javascript和其它语言读取和操作,所以它能被用来制作动画、互动和其它效果(视频遮罩、CSS路径动画等等)
  • 你可以使用<img/>标签来显示一个SVG图像。<object><iframe>支持SVG作为它们的背景图像(通过CSS background images)。你甚至可以直接在页面上使用<svg>标签来创建矢量图像。

当你使用文本编辑器打开一个SVG文件,可以看到类似下面的代码:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id=Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">                                
                            

上面的代码看上去十分像XHTML开始的代码。如果要手工书写上面的SVG代码中的点和线的坐标是一件非常困难的事情,正因为这个原因,所以一般都是使用一些矢量图制作软件先做好图形,再将图形导出成为SVG文件。可以参考:html5 svg线条动态绘制文字轮廓边框动画

SVG 和 Canvas有什么不同?

<canvas>是一个HTML5“画板”,它可以直接被javascript操纵。<canvas>能够很好的绘制图像,但是是它绘制的图像都是位图。如果你需要缩放一张绘制好的图像,使用SVG是更好的选择。某些技术(如WebGL)在输出位图时,需要<canvas>的支持。

Previous:
上一篇:使用6行javascript代码制作一个SVG模拟时钟
Next:
下一篇:如何在网页中使用SVG
返回顶部