根本语法
首先，我在大小为400 x 400的画布中绘制了一个200 x 200的矩形：
能够发现，没有问题。
当初，我把svg的宽和高扭转后：
能够看见，等比例变小了。
简略的了解就是：viewBox标准了画布的大小，svg标签外面的内容都是依照这个画布大小来绘制的，绘制后取得了一张图片，在页面显示的时候，svg的宽和高指定了图片显示多大。
偏移
那如果viewBox标准的画布不是从0,0开始的会怎么样？
参考上面的草图了解：画布的终点是100,100，而宽和高别离是300,300，由此，理论画布的大小是400 x 400，画布上绘制的后果是一个居中，大小为200 x 200的红色矩形：
而显示的时候，咱们须要显示的内容是画布终点100,100，大小300 x 300，也就是下面草图重点标出来的地位。
非等比例
接着还有一个问题：如果画布的大小和最终图片显示的svg大小不是等比例的，会怎么样？
能够发现，并没有变形，而是矩阵显示，解决形式相似背景图片。
具体的，就牵扯到一个新属性：preserveAspectRatio 。
preserveAspectRatio
咱们对下面的例子进行调整：
其实preserveAspectRatio不写也是有默认值："xMidYMid meet"，相比默认值，咱们只是把meet改成了slice。
总结就是，preserveAspectRatio的值由两个参数组成。
第一个参数
可选值有：xMinYMin、xMinYMid、xMinYMax、xMidYMin、xMidYMid、xMidYMax、xMaxYMin、xMaxYMid和xMaxYMax。
x和y示意对齐的轴线，min,mid,max示意对齐的形式。min是往坐标小的方向对齐；mid居中对齐；max是往坐标大的方向对齐。
第二个参数
可选值有：meet和slice。
meet就是后面那种主动调整viewBox到能够在svg画布中齐全展现，相似css里background-size:contain；而slice是主动调整viewBox到撑满整个svg画布，十分相似background-size:cover。