SVG（Scalable Vector Graphics）是可缩放矢量图形的缩写。 它是一种图形格式，其中形状在XML中指定。 而XML又由SVG查看器呈现。 今天，大部分Web浏览器可以显示SVG，就像他们可以显示PNG，GIF和JPG一样。
Internet Explorer 8（及更早版本）用户可能必须安装Adobe SVG Viewer才能在浏览器中查看SVG。 IE 9+，Chrome和Firefox原生都支持SVG。
SVG是用于二维矢量图形。 对于三维矢量图格式请参考X3D。
如果你不确定SVG是否适合你或你的项目，请快速查看SVG示例页面，以便快速了解SVG的功能。
这里是这篇文章的视频版本：
<iframe width="560" height="315" src="//www.youtube.com/embed/PQxtlY19kto?list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO" frameborder="0" allowfullscreen=""></iframe>在YouTube上有一个包含我的所有的SVG视频的列表
作为矢量图形格式，SVG对于绘制矢量类型图表示非常有用的，如：
- 在X,Y坐标系中的二维图形
- 柱形图，饼图等
- 网页、平板电脑和手机app和webapp中可伸缩的图标和logo
- 建筑和设计图
- ...
作为“矢量图形”格式显示的形状被存储为矢量或者类矢量结构。换句话说，它们以数字形式存在，而不是像素。
“可伸缩”意味着你可以随意放大缩小SVG图像，其不会出现失真的问题。这是可能的，因为图形的一些数字属性仅表示数字，而非像素。放大和缩小SVG图像只是相当于乘以或除以定义SVG形状的数字。
SVG对于位图图形（如照片、电影等）是不理想的，尽管你也可以将位图图形嵌入SVG图片。不过，在位图图片上绘制图形或文字时，使用上述方法也很方便。
作为一种XML格式（一种文本格式），SVG很容易用Servlet，JSP，ASP.NET，PHP或其他Web应用程序技术生成。这使得SVG非常适合计算机生成的图形和图表。有趣的是，你经常需要在Web应用程序中生成完全适合SVG的图形类型（图形、图表、图等）。这也使得SVG更适合生成图形和图表。
可以通过JavaScript修改在浏览器中生成的SVG图像。所以，我们也可以使用SVG来做更多的动态演示，甚至开发一些小游戏（开发游戏可能HTML5 Canvas更合适）。
本教程的目的是让你能在短时间内使用SVG，并且能够使用教程作为快速参考。虽然我将尽可能覆盖更多的SVG知识，但是不会覆盖到SVG规范的每一个小部分。一旦你对基础知识有了一定的理解，你可以很容易地参考更高级或特殊情况主题的SVG规范。
本教程“正在进行中”，如果你希望收到新的内容的通知，可以订阅RSS Feed
如果你想要尝试本教程中的一些示例或者使用SVG，我已经建了一个简单的在线SVG编辑器：ScriptDraw。你可以链接到ScriptDraw.com