外围劣势

  • 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 轴的压缩比。