SVG 入门

核心优势

• XML的格式，容量较小
• 比较灵活，可以修改样式

自适应缩放

• viewport：是 SVG 的可视区域，就是 SVG 的属性 width 和 height 的范围，离开可视区域外的内容是不会被渲染的。

• viewBox：用于画布上制作 SVG图形的坐标系统（ viewBox="x, y, width, height" ）默认和 viewBox 一致。

  <svg width="20px" height="20px" viewBox="0 0 20 20">xxx</svg> 

  • 如果进行手动指定， SVG 会进行自动换算缩放比： width/viewBox.width、 height/viewBox.height

    <svg width="500" height="200" viewBox="0 0 50 20" style="border: 1px solid #000;">
      <rect x="20" y="10" width="10" height="5" style="stroke: #000; fill: none;"/>
    </svg> 

    Tip： viewBox 一般作为静态值需要固定下来， width 和 height 是可以动态修改的

• preserveAspectRatio：保留宽高比，当 viewport 和 viewBox 宽高比不相同时，指定在 viewport 中的绘制区域，默认值是 xMidYMid meet

  • meet：表示固定宽高比，并将 viewBox 缩放为 viewport 的大小

    在 meet 模式下，最终压缩比优先采纳压缩比较小的。（设置 yMid/yMin/yMax 都一样）

  • slice：保持宽高比并将所有不在 viewport 中的 viewBox 裁掉

    在 slice 模式下，最终压缩比优先采纳压缩比较大的。（设置 xMid/xMin/xMax 都一样）

  • xMidyMid：（ x 轴和 y 轴一样）

    • xMid：viewBox 的 x 轴的中点在 viewport 的 x 轴中点
    • xMin：viewBox 的 x 轴的起点(最小边)在 viewport 的 x 轴起点(最小边)
    • xMax：viewBox 的 x 轴的终点(最大边)在 viewport 的 x 轴终点(最大边)

  • none：不保持宽高比，缩放图像适合整个 viewBox，可能会发生图像变形。

    在 none 模式下，将分别计算 x 和 y 轴的压缩比。