移除SVG小数viewbox并将路径缩放至指定宽高

开发者阿泽

2026-8-6

解决SVG视图框小数兼容问题并匹配29×27尺寸

可以将视图框改为整数值，同时缩放路径坐标来匹配目标尺寸，具体操作如下：

1. 计算缩放比例

原视图框尺寸：viewportWidth=6.9083，viewportHeight=6.3553
我们将目标视图框设为与最终物理尺寸一致的整数值29和27，避免额外缩放计算。

横向缩放比例：29 / 6.9083 ≈ 4.1978
纵向缩放比例：27 / 6.3553 ≈ 4.2484

取近似值4.2对路径所有坐标进行等比缩放，保证图形比例不变。

2. 处理后的Android Vector Drawable

将视图框改为整数值，同时替换缩放后的路径数据：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="29dp"
    android:height="27dp"
    android:viewportWidth="29"
    android:viewportHeight="27">
  <path
      android:fillColor="#1276e7"
      android:pathData="M19.61,0c-2.03,0 -3.41,0.71 -5.39,2.31 -1.98,-1.6 -3.28,-2.31 -5.39,-2.31C3.61,0 0,4.57 0,10.5 0,15.18 4.27,20.35 12.63,26.11c1.13,0.78 2.62,0.78 3.76,0 8.36,-5.76 12.61,-10.93 12.61,-15.61 0,-5.93 -3.61,-10.5 -9.21,-10.5Z" />
</vector>

3. 处理后的标准SVG文件

修改viewBox为整数值，替换缩放后的路径：

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 27">
  <defs>
    <style>
      .cls-1 {
        isolation: isolate;
      }

      .cls-2 {
        fill: #1276e7;
      }
    </style>
  </defs>
  <g id="_形状_87_拷贝" data-name="形状 87 拷贝" class="cls-1">
    <g id="_形状_87_拷贝-2" data-name="形状 87 拷贝">
      <path class="cls-2" d="M19.61,0c-2.03,0 -3.41,0.71 -5.39,2.31 -1.98,-1.6 -3.28,-2.31 -5.39,-2.31C3.61,0 0,4.57 0,10.5 0,15.18 4.27,20.35 12.63,26.11c1.13,0.78 2.62,0.78 3.76,0 8.36,-5.76 12.61,-10.93 12.61,-15.61 0,-5.93 -3.61,-10.5 -9.21,-10.5Z"/>
    </g>
  </g>
</svg>