网站导航
> 技术文档 > android如何使用矢量图（svg）资源_android svg

android如何使用矢量图（svg）资源_android svg

网友: 技术文档 2025-08-08 02:16:42

一 viewportWidth和viewportHeight含义

viewportWidth 和 viewportHeight 控制的是矢量图的绘制空间大小，即图形的虚拟坐标系统的大小。

详细解释：

在矢量图中，图形的元素（如路径、形状等）是根据一个坐标系统来绘制的。这个坐标系统定义了矢量图的“工作空间”，并且**viewportWidth** 和 viewportHeight 就是用来设置这个工作空间的尺寸的。

  • viewportWidth：定义了矢量图形的虚拟宽度（单位是图形坐标系的单位，而不是像素）。这表示矢量图形设计时的宽度单位，可以理解为设计图形时使用的“画布”宽度。

  • viewportHeight：定义了矢量图形的虚拟高度，类似地，表示矢量图形设计时的高度单位。

例如：

假设设置了以下属性：

android:viewportWidth=\"24.0\"android:viewportHeight=\"24.0\"

这表示该矢量图形的绘制空间是一个 24x24 的单位空间。所有的路径、形状和元素都会在这个 24x24 单位的坐标系统内进行定义和绘制。

  • 如果的路径数据（android:pathData）是在这个 24x24 的坐标系统下设计的，那么路径会被缩放到这个虚拟坐标系中，适应这个尺寸。
  • 通过这些坐标，可以自由地控制图形元素在空间中的位置和比例。

作用：

  • 图形设计时的统一标准：viewportWidth 和 viewportHeight 提供了一个统一的坐标系统，设计者和开发者可以在这个坐标系统内设计图形，而不用担心实际显示尺寸。

  • 缩放适配：当把这个矢量图应用到 UI 上时，Android 会根据实际的显示尺寸（由 height 和 width 控制）来缩放和渲染图形，而 viewportWidth 和 viewportHeight 的设置则决定了图形缩放的比例。

✨ 示例

<vector xmlns:android=\"http://schemas.android.com/apk/res/android\" android:width=\"64dp\" android:height=\"48dp\" android:viewportWidth=\"64\" android:viewportHeight=\"48\">
  • vector 标签定义了一个矢量图。
  • android:width=\"64dp\"：渲染出来时显示宽度是 64dp。
  • android:height=\"48dp\"：渲染出来时高度是 48dp。
  • android:viewportWidth=\"64\"：画布逻辑宽度，内部绘制用 64。
  • android:viewportHeight=\"48\"：画布逻辑高度，内部绘制用 48。

→ 注意：这里 viewport 和实际尺寸是1:1的，所以绘制是直接映射的，不缩放、不拉伸。

小结：

vie wportWidth 和 viewportHeight 是用于定义矢量图形的绘制空间大小，它们设定了一个虚拟坐标系统，图形中的元素都是在这个坐标系统下进行设计和绘制的。当图形显示到屏幕上时，Android 会根据实际显示尺寸来缩放这些元素，但设计时的坐标系统是由 viewportWidth 和 viewportHeight 控制的。

二 关于图片大小

这样显示的图标还大，但是 图标反而小了，这是为什么呢？

这个现象非常正常，而且其实是 矢量图在 Android 渲染机制导致的。
我详细给讲一下：

🎯 两段 有什么区别？

属性 第一段 第二段 android:width 64dp 64dp android:height 64dp 64dp viewportWidth 48 64 viewportHeight 48 64

主要区别是 viewportSize 不同，一个是 48，一个是 64。

📖 Android 渲染 VectorDrawable 的原理

Android 绘制 的时候，会按照下面的逻辑：

  • 先创建一个 viewport（坐标系统），宽 viewportWidth，高 viewportHeight；
  • 然后把 pathData 中的点 绘制在 viewport 坐标系里；
  • 最后把 viewport **按比例拉伸到 android:width × android:height 大小（这里都是64dp × 64dp）！

也就是说：

图的显示比例 = (控件实际宽高) / (viewportWidth, viewportHeight)

🔥 所以为什么看到的现象是：

viewport 设置 效果（在同样64dp控件里） 原因 viewport 48 图变大 因为 64dp / 48 = 1.33倍放大 viewport 64 图正常大小 因为 64dp / 64 = 1.0倍，原比例显示

✅ viewport 小，就被放大显示；
✅ viewport 大，就显示正常大小，甚至如果 viewport 比控件大，还会被压缩！

🧠 通俗比喻一下

  • viewport48 就像拿一张 小纸画个圈，然后把纸撑到一个64dp大的框框里，当然圈子也被放大了；
  • viewport64 就像拿一张 本来就64大小的纸，放进去刚好适配，没有变化。

🎯 重点总结

属性 作用 android:width / height 控件本身多大（布局尺寸，比如64dp × 64dp） viewportWidth / viewportHeight 图形原本的内部坐标系大小，影响缩放比例 pathData 真正画图的路径

viewport越小，图被放得越大；viewport越大，图被压缩得越小。

🚀 实战建议

  • 想要图显示清晰且比例合适，最好让 viewportWidth:viewportHeight 和 width:height 同等比例；
  • 比如 64dp:64dp 配合 64:64 viewport，效果最标准。

如果不一致，就要根据实际情况调节 viewport，或者用 AndroidStudio 的 VectorAsset导入时手动适配。

三 android 如何使用svg图片资源

在 Android 中，要将 SVG 图片资源显示在 UI 界面上，可以通过以下几种方式，其中最常见和推荐的方式是使用 VectorDrawable 或者第三方库（如 Glide 或 Picasso）来加载 SVG 文件。

方法 1：将 SVG 转换为 VectorDrawable

Android 直接不支持 SVG 文件，但可以通过将 SVG 文件转换为 VectorDrawable 来处理，并通过 ImageView 显示它们。

步骤：

  1. 将 SVG 文件转换为 VectorDrawable：

    从 Android Studio 3.0 开始，Android Studio 提供了一个工具可以自动将 SVG 文件转换为 VectorDrawable 文件。可以通过以下步骤将 SVG 文件导入到项目中：

    • 在 res/drawable 目录下右键点击，选择 New -> Vector Asset。
    • 选择 “Local file (SVG, PSD)”，然后选择的 SVG 文件，Android Studio 会自动将其转换为 VectorDrawable 格式。

    生成的 VectorDrawable 文件会是类似于以下的 XML 文件：

    <vector xmlns:android=\"http://schemas.android.com/apk/res/android\" android:width=\"24dp\" android:height=\"24dp\" android:viewportWidth=\"24\" android:viewportHeight=\"24\"> <path android:fillColor=\"#FF000000\" android:pathData=\"M12,2L15,8H9L12,2z\"/></vector>

  2. 通过 ImageView 显示 VectorDrawable：

    在的布局 XML 文件中，使用 ImageView 来显示这个 VectorDrawable 资源：

    <ImageView android:id=\"@+id/myImageView\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:src=\"@drawable/my_svg_file\" />

    这里的 android:src 指向的是刚才生成的 VectorDrawable 资源。

  3. 运行的应用，应该能够看到 SVG 图片被成功渲染为 VectorDrawable 并显示在 UI 界面上。

方法 2：使用第三方库（如 Glide 或 Picasso）

如果不想手动转换 SVG 文件为 VectorDrawable，可以使用第三方库如 Glide 或 Picasso，它们支持直接加载 SVG 图片资源。

使用 Glide 加载 SVG：

  1. 添加 Glide 的依赖：

    在 build.gradle 文件中添加 Glide 的依赖：

    dependencies { implementation \'com.github.bumptech.glide:glide:4.12.0\' implementation \'com.caverock:androidsvg:1.4\'}

  2. 使用 Glide 加载 SVG 文件：

    在 ImageView 中加载 SVG 图片资源：

    Glide.with(context) .load(Uri.parse(\"file:///android_asset/my_image.svg\")) // 或者从 URL 加载 SVG .into(imageView);

    Glide 会自动将 SVG 文件转换并渲染到 ImageView 上。

使用 Picasso 加载 SVG：

  1. 添加 Picasso 的依赖：

    dependencies { implementation \'com.squareup.picasso:picasso:2.71828\'}

  2. 使用 Picasso 加载 SVG 文件：

    Picasso.get() .load(\"file:///android_asset/my_image.svg\") // 或者从 URL 加载 SVG .into(imageView);

    Picasso 会自动处理 SVG 文件并显示在 ImageView 中。

方法 3：直接使用 SVG 库

如果需要更细粒度的控制或想直接在 ImageView 中加载和渲染 SVG 文件，可以使用 AndroidSVG 库，它是一个专门用来解析和渲染 SVG 文件的库。

  1. 添加依赖：

    dependencies { implementation \'com.caverock:androidsvg:1.4\'}

  2. 加载并显示 SVG 文件：

    可以使用 SVG 库加载和渲染 SVG 文件，然后将其绘制到 ImageView 中：

    try { // 从 assets 或文件加载 SVG 文件 SVG svg = SVG.getFromAsset(context.getAssets(), \"my_image.svg\"); PictureDrawable drawable = new PictureDrawable(svg.renderToPicture()); // 将绘制的 SVG 设置到 ImageView 中 imageView.setImageDrawable(drawable);} catch (SVGParseException e) { e.printStackTrace();}

总结：

  • 最简单的方式是将 SVG 文件转换为 VectorDrawable，然后通过 ImageView 进行显示。
  • 如果不想手动转换，可以使用第三方库 Glide 或 Picasso 来直接加载并显示 SVG 文件。
  • 如果需要更多控制或者直接渲染 SVG 文件，可以使用 AndroidSVG 库。

其中，使用 VectorDrawable 是官方推荐的方式，尤其在 Android 5.0 以上版本，它提供了很好的性能和可扩展性。

网络标签：

相关问题