（图片来源：SVG 研究之路 (23) - 理解 viewport 與 viewbox） 2.3、preserveAspectRatio
上图的红色框框和蓝色框框，恰好和显示器的比例相同，如果是下图的绿色框框，怎样在显示器屏幕中显示呢？
preserveAspectRatio 作用的对象是 viewBox，使用方法如下：
preserveAspectRatio="[defer] <align> [<meetOrSlice>]" // 例如 preserveAspectRatio="xMidYMid meet"其中 defer 此时不是重点，暂且忽略，主要了解 align 和 meetOrSlice 的 用法：
align：由两个名词组成，分别代表 viewbox 与 viewport 的 x 方向、y方向的对齐方式。
值 含义xMin viewport 和 viewBox 左边对齐
xMid viewport 和 viewBox x轴中心对齐
xMax viewport 和 viewBox 右边对齐
YMin viewport 和 viewBox 上边缘对齐。注意Y是大写。
YMid viewport 和 viewBox y轴中心点对齐。注意Y是大写。
YMax viewport 和 viewBox 下边缘对齐。注意Y是大写。
meetOrSlice：表示如何维持高宽的比例，有三个值 meet、slice、none。
meet - 默认值，保持纵横比缩放 viewBox 适应 viewport，可能会有余留的空白。
slice - 保持纵横比同时比例小的方向放大填满 viewport，超出的部分被剪裁掉。
none - 扭曲纵横比以充分适应 viewport。
2.3.2、 例子例子1：preserveAspectRatio="xMidYMid meet" 表示 绿色框框 与 显示器的 x 方向、y方向的 中心点 对齐；
例子2：preserveAspectRatio="xMidYMin slice" 表示 绿色框框 与 显示器的 x 方向 中心点 对齐，Y 方向 上边缘对齐，保持比例放大填满 显示屏 后超出部分隐藏；
例子3：preserveAspectRatio="xMidYMid slice" 表示 绿色框框 与 显示器的 x 方向、y方向的 中心点 对齐，保持比例放大填满显示屏 后超出部分隐藏；
例子4：preserveAspectRatio="none" 不管三七二十一，随意缩放绿色框框，填满 显示屏即可；这就是非比例缩放的答案了。
微信小程序官方不支持 SVG 标签的，但是决定曲线救国，相当于自己实现了一个SVG标签：使用小程序内置的 Canvas 渲染器， 在 Cax 中实现 SVG 标准的子集，使用 JSX 或者 HTM（Hyperscript Tagged Markup） 描述 SVG 结构行为表现。
但是今天我想讲讲其他的。
我们知道，小程序虽然不支持 SVG 标签，但是支持 svg 转成 base64 后作为 background-image 的 url，如 background-image: url("data:image/svg+xml.......) 。
但是我这边还有个需求，随时更改 SVG 每个路径的颜色，即 颜色可配置：
来回转 Base64 肯定是比较麻烦的，有没有更好的方式呢？
直接贴答案：对于SVG图形，还有更好的实现方式，就是直接使用SVG XML格式代码，无需进行base64转换。