Android 矢量图（Vector Drawable）核心坐标与尺寸机制技术文档

Android 矢量图（Vector Drawable）核心坐标与尺寸机制技术文档## 概述

width ,height 是实际物理尺寸，显示大小

viewportWidth,viewportHeight是虚拟画布大小，会通过等比缩放放在实际物理尺寸上。

虚拟画布是 32 × 32

默认物理大小是 40dp × 40dp。

映射关系：虚拟画布中的 1 个单位（1 个格子），在手机屏幕上实际上会被放大渲染成 40 ÷ 32 = 1.25dp 的物理大小

在 Android 开发中，矢量图（Vector Drawable）通过基于 XML 的几何路径描述来实现跨分辨率的清晰显示。理解其内在的尺寸调节机制，是解决图标拉伸、变形、留白过多或显示过小等布局问题的核心。本文将深度拆解矢量图的四个核心属性------width、height、viewportWidth 与 viewportHeight，并结合 Jetpack Compose 布局特性阐述其协同工作原理。

属性核心定义与区别

矢量图的尺寸机制由两套相互独立、成对协作的坐标系统组成：物理尺寸外壳与虚拟画布视口。

±------------------------------------------------------------+

| Vector Drawable (XML) |

| |

| <vector android:width="40dp" android:height="40dp" ...> |

| ========================================== |

| $物理外壳 / 默认尺寸$ |

| |

| ±--------------------------------------------------+ |

| | viewport (虚拟画布) | |

| | android:viewportWidth="32" | |

| | android:viewportHeight="32" | |

| | | |

| | (0,0) | |

| | .---------------------------------------. | |

| | | | | |
| | | | | |
| | | | | |
| | '---------------------------------------' | |
| | (32,32) | |
| ±--------------------------------------------------+ |
±------------------------------------------------------------+

1. 虚拟画布：viewportWidth / viewportHeight

定义：定义矢量图内部的虚拟坐标系大小（Viewport / 视口）。它是一个纯数字，无任何物理单位（非 dp，非 px）。
作用：为矢量图内部的路径元素（）提供精确的相对参考坐标。
示例：当设置 viewportWidth="32" 和 viewportHeight="32" 时，相当于在内部划分了一个 32×3232 \times 3232×32 的整数网格。路径数据 M 0,0 L 16,16 中的数值 16 即代表该虚拟网格的正中心点。

2. 物理外壳：width / height

定义：定义该图标在设备屏幕上渲染时的默认实际物理尺寸。必须显式指定物理单位（通常为 dp）。
作用：当在上层布局组件（如传统 XML 的 ImageView 或 Jetpack Compose 的 Icon）中未显式指定具体的尺寸 Modifier 时，系统将默认采用此处声明的物理尺寸进行占位和渲染。

协同工作原理：拉伸与映射

Android 渲染引擎在解析矢量图时，会自动建立虚拟画布到物理外壳的等比例映射与缩放关系。

映射计算公式

单个虚拟单位的物理大小=物理外壳尺寸 (width/height)虚拟视口尺寸 (viewportWidth/viewportHeight)\text{单个虚拟单位的物理大小} = \frac{\text{物理外壳尺寸 (width/height)}}{\text{虚拟视口尺寸 (viewportWidth/viewportHeight)}}单个虚拟单位的物理大小=虚拟视口尺寸 (viewportWidth/viewportHeight)物理外壳尺寸 (width/height)

实例分析

以带有如下属性的 icon.xml 为例：

虚拟画布单元为 32×3232 \times 3232×32，默认物理尺寸为 40dp×40dp40\text{dp} \times 40\text{dp}40dp×40dp。
映射关系：虚拟画布中的 111 个单位，在手机屏幕上实际会被放大渲染为：
40dp32=1.25dp\frac{40\text{dp}}{32} = 1.25\text{dp}3240dp=1.25dp

矢量图分离设计的核心优势## 1. 简化视觉创作与数学计算

在诸如 32 或 24 等标准的整数网格坐标系上绘制几何图形（如计算圆心、对称路径点），能显著降低设计与代码维护的复杂度，有效避免在数据中产生大量高精度的浮点型物理像素值。

2. 保证资产的任意无限放大不失真

不论上层 UI 容器将组件尺寸扩展至何种量级（例如在 Jetpack Compose 中声明 Modifier.size(200.dp)），由于内部路径采用的是绝对相对比例，系统均能基于新的物理边界高精度重建像素矩阵，实现真正的无级变速缩放而不产生模糊或马赛克。

最佳实践：Jetpack Compose 中的尺寸兼容

标准的 UI 设计规范要求：物理外壳的宽高比必须与虚拟画布的宽高比保持高度一致。

widthheight=viewportWidthviewportHeight\frac{\text{width}}{\text{height}} = \frac{\text{viewportWidth}}{\text{viewportHeight}}heightwidth=viewportHeightviewportWidth

在开发动态多画质、多规格图标功能时，长方形图标与正方形图标混用经常会导致长方形图标在正方形死格子（如 Modifier.size(32.dp)）中高度缩水、视觉过小的问题。

运行机制比对

图标类型	原始 XML 规格	Modifier.size(32.dp) 表现	Modifier.height(32.dp).width(IntrinsicSize.Min) 表现
正方形图标 LOSSLESS / EX_HIGH	width: 40dp, height: 40dp viewport: 32 × 32	32dp × 32dp 等比例缩小，完美填充。	32dp × 32dp 根据 1:1 比例计算出宽度，完美填充。
长方形图标 HI_RES	width: 67.5dp, height: 40dp viewport: 54 × 32	32dp × 19dp 因约束正方形，宽度先触顶，高度被迫等比例缩水至 19dp，上下留白，视觉极小。	54dp × 32dp 高度优先拉满 32dp，宽度依据 1.6875 比例自动延展至 54dp，图形饱满清晰。

Android 矢量图（Vector Drawable）核心坐标与尺寸机制技术文档