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