preserveAspectRatio属性允许我们指定图像和视口的对齐方式。指定我们是希望他适配边缘还是裁切。这一个属性的模型为：
preserveAspectRatio="alignment [meet|slice]"
其中alignment可以指定轴和位置。对其说明方式由一个x对齐方式的值和一个y对齐方式的值（min，mid或者max）组成。preserveAspectRatio的默认值为xMidYMid meet。
如果你想要viewBox="0 0 90 90"内的图片完全适配宽为45像素，高为135像素的视口，并且与视口顶部对齐。那么你就要编写如下的代码：
<svg width="45px" height="135px" viewBox="0 0 90 90" preserveAspectRatio="xMinYMin meet" />
在这种情况下，由于宽度正好适配，因此X对齐方式并不重要。你也可以使用xMidYMin或者xMaxYMin。然而，通常在不知道视口宽高比的时候才会使用preserveAspectRatio。比如：你可能希望缩放图像以适配应用程序窗口。或者可能使用父文档的CSS来设置高度和宽度。在这些情况下，你需要考虑视口太宽或者太高的时候应该如何去展示图像。
1.使用meet说明符
meet说明符的主要作用就是让图像匹配视口。下面我们来举一些例子
<!--高视口-->
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" width="45" height="45" />
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" width="45" height="135" />
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" width="45" height="135" />
<!--宽视口-->
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" width="135" height="45" />
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" width="135" height="45" />
<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" width="135" height="45" />
2.使用slice说明符
slice说明符会将视口区域进行裁剪。也就是说，会将图像不符合视口的区域给他丢弃掉。
<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90" width="135" height="45" />
3.使用none说明符
除了meet和slice之外。我们还有第三个用于在viewBox和视口的宽高比不同时缩放图像。如果preserveAspectRatio的值为none。那么图像不会被等比例缩放。
这种缩放方式也叫做：不保留宽高比
<svg preserveAspectRatio="none" viewBox="0 0 90 90" width="135" height="45" />
