viewportwidth 和 viewportheight 是矢量图内部坐标系范围,非显示尺寸;android:width/android:height 才决定实际渲染大小,二者需比例一致以避免拉伸或模糊。

viewportWidth 和 viewportHeight 是画布尺寸,不是最终显示大小
很多人以为 viewportWidth 和 viewportHeight 控制图标在界面上的宽高,其实它们定义的是矢量图内部的坐标系范围——相当于 Photoshop 里的“画布大小”。这个坐标系用来定位 <path></path> 的 android:pathData,所有路径点都基于它归一化计算。
常见错误现象:
• 图标看起来被裁剪或留白过多
• 改了 viewportWidth 却发现图标没变大,只是路径变形了
• 在不同 android:width/android:height 下,线条粗细或间距突变
- 必须和
android:width/android:height配合理解:后者才是实际渲染尺寸,前者只是内部坐标比例尺 - 推荐设为整数(如
24、48),避免小数导致浮点精度误差影响路径对齐 - 若
pathData原始设计基于 24×24,就别强行改成viewportWidth="100",否则所有坐标都要重算
viewport 和 android:width/height 的缩放关系直接影响 path 渲染质量
Android 会把 viewport 坐标系线性映射到目标尺寸。比如 viewportWidth="24" 对应 android:width="48dp",那么路径中 x=12 的点就会落在水平居中位置;但如果 android:width="48.5dp",就可能因非整数缩放引入亚像素渲染,导致边缘模糊或锯齿。
使用场景:
• 适配不同密度屏幕时,android:width 常用 dp,而 viewport 保持固定
• 自定义 View 中通过 setBounds() 动态调整大小,viewport 不变但渲染区域变了
- viewport 宽高比最好和
android:width/android:height的宽高比一致,否则路径会被拉伸 - 避免 viewport 设为奇数(如
23)再搭配偶数 dp 尺寸,容易让中心线落在两个像素中间 - 调试时可用
adb shell dumpsys activity top查看实际渲染尺寸,比预估更可靠
viewBox 不是 Android Vector 的属性,别和 SVG 混淆
Android 的 VectorDrawable 不支持 viewBox 属性,这是 SVG 标准里的概念。有人从 Sketch 或 Figma 导出 SVG 再转成 VectorDrawable,看到原始 SVG 有 viewBox="0 0 24 24",就误以为要照搬进 XML,结果编译报错或行为异常。
错误信息示例:error: attribute 'android:viewBox' not found
- SVG 转 VectorDrawable 工具(如 Android Studio 的 New → Vector Asset)会自动把
viewBox映射为viewportWidth/viewportHeight,并重写pathData坐标 - 手动修改时,只改
viewportWidth/viewportHeight和pathData,永远不要加viewBox - 如果原始 SVG 的
viewBox是"10 10 100 100",对应 VectorDrawable 应设viewportWidth="100"、viewportHeight="100",且所有路径坐标减去偏移(x−10, y−10)
动态修改 viewport 导致重绘失败,Runtime 不支持
VectorDrawable 的 viewportWidth 和 viewportHeight 是在 XML 解析时静态确定的,运行时无法修改。试图通过反射或自定义 Drawable 子类去改,只会让 draw() 出现坐标错乱或直接跳过渲染。
常见错误操作:
• 在 onDraw() 里调用 setViewport()(该方法不存在)
• 用 mutate() 后修改私有字段,后续 invalidateSelf() 失效
- 需要不同 viewport 行为?准备多套 XML 文件,用
ContextCompat.getDrawable()切换 - 想实现缩放动画?用
AnimatedVectorDrawable驱动pathData变形,而不是改 viewport - 极端情况需运行时生成矢量图,用
PictureDrawable+Canvas绘制,绕过 VectorDrawable 限制










