SVG

SVG的历史

SVG的第一个版本是在2001年推出的。你没有听错，SVG在2001年就诞生了。尽管它一直在 发展，但是直到高分辨率设备的出现才被广泛注意和采用。下面是1.1规范中对SVG的介绍
（https://www.w3.org/TR/SVG11/intro.html）：
“SVG是XML[XML1.0]中用于描述二维图形的语言。SVG支持三种图形对象：矢量 图形形状（例如由直线和曲线组成的路径）、图像和文本。” 顾名思义，SVG允许在代码中使用矢量点来描述二维图像。这种优势使SVG被广泛应用到图 标、线条图和图表的表示中。
因为矢量图是使用相对点来保存数据的，所以可以缩放到任意大小而不会损失清晰度。此外， 由于SVG仅仅保存矢量点，相比于同等尺寸的JPEG、GIF和PNG，其文件大小更小。
SVG现在的浏览器支持度也相当不错，Android 2.3以上和IE9以上都支持（http://caniuse.com/ #search=svg）。

！SVG
)

用文档表示的图像

通常情况下，如果你在文本编辑器里查看图像文件的代码，会不知所云。
而SVG不同，它是使用标记式语言进行描述的。SVG使用XML（eXtensible Markup Language， 可拓展标记语言）来描述，XML是一种和HTML十分相似的语言。现今，XML在互联网上遍布 各地。你使用过RSS阅读器吗？它就是基于XML的。XML是包装RSS内容的语言，从而让它便于 被多种工具和服务使用。
所以不仅机器可以阅读和理解SVG图像，我们也可以。
让我举个例子。下面是一幅星星的图片：

这是一张SVG图像，在example_07-01中被命名为Star.svg。如果你在浏览器中打开这个文件， 可以看到一个星星；如果你在文本编辑器里打开，会看到生成它的代码。

这就是用于生成星星SVG图片所需的全部代码。 通常来说，如果你从未看过SVG代码，会好奇为什么我需要看这些代码。诚然，如果你只是 想在Web页面上显示这些矢量图像，你当然不需要查看代码。只要找一个图形应用，将你的矢量 图像保存为SVG格式就大功告成了。我们会在接下来列举这些应用。 尽管大部分情况下我们只会用图像编辑器来编辑SVG，但是明白SVG是如何构成的以及如何 调整它还是十分有用的，特别是你要控制它或者给它加上动画效果的时候。 所以，让我们好好研究一下SVG的标记语言，并且了解到底发生了什么。我希望你能注意到 以下几个关键点。

SVG的根元素 SVG的根元素有width、height和viewbox属性。

<svg width="198px" height="188px" viewBox="0 0 198 188" 这三个属性在SVG展示的时候都起到了十分重要的作用。
希望现在你能很好地理解“视口”这个概念。在本书众多章节中它都用于描述在设备上能够 观看内容的面积。举个例子，一部手机的视口可能只有320像素宽480像素高，而桌面电脑则一般 有1920像素宽1080像素高。
宽度和高度属性对于创造一个视口十分有用。透过这个定义的视口，我们可以看到内部定义
7.2 用文档表示的图像 139
1
2
3
4
5
8
6
7
8
8
的SVG形状。和普通的Web页面一样，SVG的内容可能会比视口大，但是这不意味着多余的部分 就不存在，只是我们看不到而已。
而另一方面，视框（viewbox）则定义了SVG中所有形状都需要遵循的坐标系。
你可以把视框值0 0 198 198视为对矩形左上角和右下角的描述。前两个值被称为min-x 和min-y，用于描述左上角的位置。而接下来的两个值被称作宽度和高度，可以描述右下角的位 置。
因此viewbox属性可以让你缩放图片。例如，你可以这么设置viewbox属性：
<svg width="198px" height="188px" viewBox="0 0 99 94" 那么其中的形状为了填满SVG的宽度和高度，就会被放大。
为