1.SVG教程

SVG简介

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的功能。

这里是这篇文章的视频版本：

在YouTube上有一个包含我的所有的SVG视频的列表

作为矢量图形格式，SVG对于绘制矢量类型图表示非常有用的，如：

作为“矢量图形”格式显示的形状被存储为矢量或者类矢量结构。换句话说，它们以数字形式存在，而不是像素。

“可伸缩”意味着你可以随意放大缩小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

最后更新于4年前