221

我找到了无数的库，以便在 Android 中使用 svg 并避免令人沮丧地创建不同的分辨率并为每个分辨率删除文件，当应用程序有很多图标或图像时，这变得非常烦人。

任何人都可以提供一个在Android中使用SVG的最简单使用库的逐步过程，我相信这也会对其他人有所帮助。

我还使用 Android Studio 和 Illustrator 来生成我的图标和图像。

4

9 回答 9

467

首先，您需要svg按照简单的步骤导入文件。

  1. 右键单击项目的可绘制文件夹（app/res/drawable）
  2. 点击新建
  3. 选择矢量资源

如果图像在您的计算机中可用，则选择本地svg文件。之后，选择图像路径，如果您愿意，对话框右侧也可以使用更改图像大小的选项。通过这种方式，svg图像被导入到您的项目中。

之后使用此图像使用相同的过程：

@drawable/yourimagename
于 2016-09-01T08:48:56.243 回答
19

更新：不要使用这个旧答案，最好使用这个： https ://stackoverflow.com/a/39266840/4031815

好的，经过几个小时的研究，我发现svg-android非常易于使用，所以我将逐步说明：

  1. 从以下位置下载 lib：https ://code.google.com/p/svg-android/downloads/list 撰写本文时的最新版本是：svg-android-1.1.jar

  2. 将罐子放在lib目录中。

  3. 将您的 *.svg 文件保存在res/drawabledir 中（在 illustrator 中就像按另存为并选择 svg 一样简单）

  4. 使用 svg 库在您的活动中编写以下代码：

    ImageView imageView = (ImageView) findViewById(R.id.imgView);
SVG svg = SVGParser.getSVGFromResource(getResources(), R.drawable.example);
//The following is needed because of image accelaration in some devices such as samsung
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
imageView.setImageDrawable(svg.createPictureDrawable());



您可以像这样减少样板代码

很简单，我做了一个简单的类来包含过去的代码并减少样板代码，如下所示：

import android.app.Activity;
import android.view.View;
import android.widget.ImageView;

import com.larvalabs.svgandroid.SVG;
import com.larvalabs.svgandroid.SVGParser;

public class SvgImage {

    private static ImageView imageView;
    private Activity activity;
    private SVG svg;
    private int xmlLayoutId;
    private int drawableId;


    public SvgImage(Activity activity, int layoutId, int drawableId) {
        imageView = (ImageView) activity.findViewById(layoutId);
        svg = SVGParser.getSVGFromResource(activity.getResources(), drawableId);
        //Needed because of image accelaration in some devices such as samsung
        imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imageView.setImageDrawable(svg.createPictureDrawable());
    }
}

现在我可以在活动中这样称呼它：

    SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain);
    SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder);
    SvgImage oceanSVG = new SvgImage(MainActivity.this, R.id.oceanImageView, R.drawable.ocean);
    SvgImage fireSVG = new SvgImage(MainActivity.this, R.id.fireImageView, R.drawable.fire);
    SvgImage windSVG = new SvgImage(MainActivity.this, R.id.windImageView,R.drawable.wind);
    SvgImage universeSVG = new SvgImage(MainActivity.this, R.id.universeImageView,R.drawable.universe);
于 2015-06-18T23:02:34.653 回答
15

Android Studio 从1.4 开始支持 SVG

这是有关如何导入的视频。

于 2015-10-14T13:33:19.020 回答
7

我建议您使用http://inloop.github.io/svg2android/将 Svg 转换为 drawable，而不是添加会增加您的 apk 大小的库。并添加vectorDrawables.useSupportLibrary = truegradle，

于 2017-05-30T06:25:56.777 回答
5

试试这个

在此处输入图像描述

下一步 -

在此处输入图像描述

现在编辑图像或图标名称并保存。

在此处输入图像描述

于 2021-04-12T09:45:49.600 回答
4
  1. 您需要将 SVG 转换为 XML 才能在 android 项目中使用。

1.1 你可以用这个网站做到这一点：http: //inloop.github.io/svg2android/ 但它不支持 SVG 的所有特性，比如一些渐变。

1.2 您可以通过 android studio 进行转换，但它可能会使用一些仅支持 API 24 及更高版本的功能，这会导致您的应用在旧设备中崩溃。

并添加vectorDrawables.useSupportLibrary = truegradle 文件并像这样使用：

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />
  1. 使用支持这些功能的这个库https://github.com/MegatronKing/SVG-Android：https://github.com/MegatronKing/SVG-Android/blob/master/support_doc.md

在应用程序类中添加此代码：

public void onCreate() {
    SVGLoader.load(this)
}

并像这样使用SVG：

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_red"/>
于 2018-07-21T22:30:06.517 回答
4

您可以使用线圈库来加载 svg。只需在 build.gradle 中添加这些行

// ... Coil (https://github.com/coil-kt/coil)
implementation("io.coil-kt:coil:0.12.0")
implementation("io.coil-kt:coil-svg:0.12.0")

然后添加扩展功能

fun AppCompatImageView.loadSvg(url: String) {
    val imageLoader = ImageLoader.Builder(this.context)
        .componentRegistry { add(SvgDecoder(this@loadSvg.context)) }
        .build()

    val request = ImageRequest.Builder(this.context)
        .crossfade(true)
        .crossfade(500)
        .data(url)
        .target(this)
        .build()

    imageLoader.enqueue(request)
}

然后在您的活动或片段中调用此方法

your_image_view.loadSvg("your_file_name.svg")
于 2020-09-13T10:15:56.537 回答
3

试试 SVG2VectorDrawable 插件。转到 Preferences->Plugins->Browse Plugins 并安装 SVG2VectorDrawable。非常适合将 sag 文件转换为矢量可绘制文件。安装后，您会在帮助 (?) 图标右侧的工具栏部分找到一个图标。

于 2017-01-03T12:34:41.843 回答
2
  1. 右键单击可绘制目录然后转到新建然后转到矢量资产
  2. 将资产类型从剪贴画更改为本地
  3. 浏览您的文件
  4. 给大小
  5. 然后点击下一步然后完成

您可用的 svg 将在 drawable 目录中生成

于 2020-03-11T14:27:58.337 回答