在 Android 中使用 SVG 的最简单方法是什么？

Question

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

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

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

Answer 1

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

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

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

之后使用此图像使用相同的步骤：

@drawable/yourimagename

Answer 2

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

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

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

2. 将jar放入lib目录。

3. 将您的 *.svg 文件保存在 res/drawable 目录中（在 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);

Answer 3

Android Studio 支持来自 1.4 onwards 的 SVG

这是how to import 上的视频。

Answer 4

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

Answer 5

试试这个

下一步-

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

Answer 6

1. 您需要将 SVG 转换为 XML 才能在 android 项目中使用。

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

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

并在 gradle 文件中添加 vectorDrawables.useSupportLibrary = true 并像这样使用：

<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"/>

Answer 7

您可以使用 Coil 库来加载 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)
}

然后在你的activity或者fragment中调用这个方法

your_image_view.loadSvg("your_file_name.svg")

Answer 8

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

Answer 9

1. 右键单击可绘制目录，然后转到新建，然后转到矢量资源
2. 将资产类型从剪贴画更改为本地
3. 浏览您的文件
4. 给出尺寸
5. 然后点击下一步然后完成

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