Android 能直接把 SVG 当作 drawable 使用吗?

VectorDrawable 资源使用的是 Android 自己的 XML 语法:一个 vector 元素,带有视口、显示尺寸和绘制路径。把 logo.svg 重命名为 logo.xml 并不会转换这些元素。SVG 对填充、描边和变换使用不同的名称,而且支持一些这个导出工具有意拒绝的功能。

简单的界面图标或扁平插画,请使用 SVG 转 Android 转换器。它接受你上传的 SVG,或你自己已解锁的结果。如果你手上是位图,请先把图片描摹成矢量图,检查轮廓后再导出。转换资源不会重新描摹,也不会免去现有结果的解锁要求。

一个可以自己动手试的小例子

把下面这个三角形保存为 triangle.svg 并上传。资源名称填 ic_triangle,最长边设为 24 dp。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#fa643c" d="M12 2L22 22H2Z"/>
</svg>

下载的 XML 包含一个 24 × 24 的视口、24 dp 的显示尺寸和一条路径。它的橙色填充会变成 Android 的透明度在前的颜色值 #fffa643c。把 ic_triangle.xml 放到 app/src/main/res/drawable/ 中。在布局中使用 android:src="@drawable/ic_triangle";在应用代码中,使用对应的 drawable 资源标识符。

视口描述的是几何图形,dp 尺寸描述的是 drawable 预期的显示大小。长方形的 SVG 会保持宽高比:最长边选 48 dp,并不会把它拉伸成正方形。资源名称以小写字母开头,可以包含小写字母、数字和下划线。

转换后哪些内容会保留?

我们的转换器支持路径和基本几何形状、纯色、填充不透明度、兼容的描边样式,以及 nonzero 和 even-odd 两种填充规则。它会把受支持的变换拼合到路径坐标中。正是因为 even-odd 填充,这个导出才面向 API 24 及以上版本。它不会为更早版本的应用生成兼容性封装。

文字、渐变、遮罩、裁剪路径、内嵌图片和特效需要另做准备。请在矢量编辑器中把文字转为轮廓。如果变换在两个方向上的缩放比例不同,请把经过变换的描边转为轮廓。组的不透明度可能会改变重叠的形状,所以导出工具会拒绝它,而不是逐个应用不透明度从而改变画面。结果中会列出所有被移除的不安全内容。

细节丰富的图稿,用 PNG 导出作为资源可能更合适。即使文件在技术上是矢量的,路径数量非常多也可能拖慢渲染。请简化不必要的锚点,并在实际屏幕尺寸下测试。

在应用中检查结果

在 Android Studio 中构建这个资源,并在浅色和深色背景上检查。检查字母内部的孔洞、细描边、预期的颜色和透明度。在小尺寸下对比原图和 drawable,细微的差别在小尺寸下最明显。XML 编译成功说明资源可以被接受;最终外观仍取决于设备的渲染和你的应用的着色设置。

启动器图标请使用应用图标生成器。启动器图标对像素密度和自适应图层有要求,普通的 drawable 导出不会打包这些内容。