导航

什么是SVG

SVG诞生于1999年，是一种 XML 语言，即可扩展标记语言，类似XHTML，即SVG，可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变、合成、或者通过滤镜完全改变外观。

为什么学SVG？它有什么优势？

比起其他的图像格式（例如jpg，gif），SVG的本身优点是：

可以使用任何文本编辑器来创建绘画SVG。
可以搜索、索引、脚本化、压缩SVG图像。
SVG图像可以扩展，可以在任何分辨率上高质量显示。
SVG图像支持缩放，且不会失去任何质量。
SVG是开放标准，是纯XML文件。

绘画一个简单的SVG

<svg width="300" height="200" version="1.1" xmlns="<http://www.w3.org/2000/svg>">
  <rect width="100%" height="100%" fill="blue" />
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

Untitled

以上绘制一个SVG基本流程
- 绘制一个svg根标签
- 绘制一个rect标签，它是一个绘制矩形的标签，宽高设置100%也就是把父级元素占满，fill属性为设置背景颜色
- 绘制一个circle标签，它是一个绘制圆形的标签，cx和cy是偏移的属性（默认是0，即圆心在坐标0，0中绘画），r是半径大小

SVG渲染规则

svg里的元素渲染顺序、规则是后来居上，越后面渲染的元素越前。

同一个位置创建了 50 * 50 的两个矩形，由于越后面的元素越可见，因此我们只能看到粉色色的矩形，蓝色的矩形被它遮住了。

Untitled

SVG文件类型

svg文件分为两种形式
- 普通SVG文件：包含SVG标准的文本文件，后缀名通常为.svg。
- 压缩版SVG文件：某种场景下的SVG文件可能很大，SVG标准是允许gzip压缩的，后缀名通常为.svgz（注意的是在FireFox不能再本地上加载svgz文件，除非知道处理发布内容的web服务器可以正确的处理gzip，否则要避免使用gzip压缩的SVG）。

SVG单位

SVG中可以带单位，也可以不带单位。如果没有为值指定单位，那么它将使用像素px为单位。

也可以为这些值指定单位，在SVG中支持的长度单位有：em、ex、pt、px、、pc、cm、mm、in和百分比值。

em：默认的字体大小，通常一个字符的高度
ex：字符x的高度
px：像素
pt：点数，1/72英寸
pc：Picas，1/6英寸
cm：厘米
mm：毫秒
in：英寸

在<svg>上设置的单位仅仅会作用在<svg>元素上（viewport）。在SVG中的图形的尺寸有各个图形自己的单位决定。

<svg width="10cm" height="10cm" style="border: 1px solid red;">
  <rect x="50" y="100" width="50" height="50" style=" fill: red;" />
  <rect x="100" y="100" width="50mm" height="50mm" style="fill: blue;"></rect>
</svg>

Untitled

右边的图形要大于左边的图形。

SVG定位

viewport

SVG图像的可见区域。或者可以想象成舞台大小，画布大小。

在<svg>元素中使用width和height属性来指定viewport的尺寸。

<svg width="500" height="300"></svg>

在SVG元素使用的是坐标系统（网络系统）。以页面的左上角为起标点，以px为单位，x轴的正方形是向右边的，而y轴正方向是向下边。

看下面这个例子，绘画一个矩形，在rect标签中加入x和y属性，从左上角开始，向右边偏移50px的距离，再向下偏移60px的距离，开始绘画一个宽高各100的矩形。

<svg width="200" height="200" version="1.1" xmlns="<http://www.w3.org/2000/svg>">
    <rect x="50" y="60" width="100" height="100" fill="#f06" />
    <!--x表示横坐标，y表示纵坐标，width表示宽，height表示高-->
</svg>

Untitled

viewBox属性

viewBox是svg标签中的一个属性，它允许指定一个给定的一组图形伸展以适应特定的容器元素。

在绘制svg图形时，若未定义viewbox，当图形大小超过绘制面板大小时，绘制的图形直接被截取，但使用viewbox后，画板将按照viewbox定义的边界进行缩放，确保图形能够完整绘制到画板上。

可以理解为：ViewBox是SVG“真正”的坐标系统。

viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width ,height，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素，不允许宽度和高度为负值,0则禁用元素的呈现。

例1，不加 viewBox时的元素

<svg width="200" height="200" style="border: 1px solid;">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

Untitled

加上viewBox属性时的元素

<svg width="200" height="200" style="border: 1px solid;" viewBox="0 0 100 100">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

Untitled

此时，画布大小为100x100，而圆的大小为200x200，圆被截取，只剩下1/4显示。

继续改变 viewBox的值

<svg width="200" height="200" style="border: 1px solid;" viewBox="0 0 400 400">
    <circle id="circle" cx="100" cy="100" r="100" fill="#529fca" />
</svg>

Untitled

此时画布大小为400x400，圆200x200，占画布1/4。

例2

<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

Untitled

SVG尺寸明明有400*300像素，而<rect>大小只有其1/20，但显示出来的却占一半！viewBox起了作用。删除viewbox之后再看下。

<svg width="400" height="300" style="border:1px solid #cd0000;">
    <rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

Untitled

<rect>大小只有整个SVG舞台的1/20。

viewBox="0,0,40,30"相当于在SVG上圈了下图左上角所示的一个框框。然后把这个框框，连同框框里的小矩形一起放大到整个SVG大小。

Untitled

preserveAspectRatio属性

这个属性直接翻译过来是意思是：保留纵横比，它跟viewBox的关系特别密切，它表示是否强制进行统一缩放，如果你设置了viewBox属性，不声明这个preserveAspectRatio属性，viewBox也会给这个属性声明一个默认值为**xMidYMid meet**。

我们上面的例子，画布的宽高和viewBox的宽高比是一样1:1的。但实际开发中我们不可能一直跟画布保持一样的比例。此时就需要声明preserveAspectRatio属性了，该属性也是应用在svg标签上的。

第1个值表示，viewBox如何与SVG viewport对齐；第2个值表示，如何维持高宽比（如果有）。

我们先看看它第一个参数都有哪些属性可以设定：

none 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。 (注意：如果第一个参数的值是 none ，则属性的第二个值将会被忽略。)
xMinYMin - 强制统一缩放。将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。
xMidYMin - 强制统一缩放。将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。
xMaxYMin - 强制统一缩放。将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。
xMinYMid - 强制统一缩放。将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。
xMidYMid (默认值) - 强制统一缩放。 将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。
xMaxYMid - 强制统一缩放。将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。
xMinYMax - 强制统一缩放。将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。
xMidYMax - 强制统一缩放。将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。
xMaxYMax - 强制统一缩放。将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。

第二个参数是可选的，如果填写第二个参数的时候，你需要第一个参数后面使用空格符，将两个参数隔开。

meet(默认值) ：保持纵横比缩放viewBox适应viewport。
slice图形将缩放到：保持纵横比同时比例小的方向放大填满viewport 。

例1

<svg width="400" height="200" viewBox="0 0 200 200" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

Untitled

默认值，preserveAspectRatio：xmidymid in meet

viewbox宽高比2，viewport宽高比1，保留小的纵横比，meet的作用是让viewBox等比例的同时，完全在SVG的viewport中显示。最小比例是纵向的1，所以，实际上viewBox并没有任何的缩放。

例2

<svg
     width="400"
     height="200"
     viewBox="0 0 200 200"
     preserveAspectRatio="xMinYMin meet"
     style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

Untitled