在Android中使用SVG图像最简单的方法是什么?

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

在Android中使用SVG图像的最简单的使用库的一步一步的过程是什么?

我还使用Android Studio和插画家来生成我的图标和图像。

224064 次浏览
小开

更新:不要使用这个旧的答案。最好使用Pallavi Jain的回答 .

我发现svg-android很容易使用，所以一步一步的说明在这里:

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

  2. 将JAR文件放在自由目录下。

  3. 将您的*.svg文件保存在res /可拉的目录中(在Illustrator中，只需按另存为并选择.)

  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 acceleration in some devices, such as Samsung
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
imageView.setImageDrawable(svg.createPictureDrawable());
}
}

现在我可以在activity中这样调用它:

    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);
小开

Android Studio从1.4以后开始支持SVG

这是一个关于如何导入的视频。

小开
最佳答案

首先，您需要按以下简单步骤导入SVG文件。

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

如果图像在您的计算机中可用，则选择本地svg文件。

之后，选择图像路径。如果你愿意，在对话框的右侧也有一个选项可以改变图像的大小。通过这种方式，SVG图像被导入到项目中。

之后，使用此图像，使用相同的程序:

@drawable/yourimagename
小开

尝试SVG2VectorDrawable插件。进入首选项→插件→浏览插件并安装SVG2VectorDrawable。这是伟大的转换svg文件到矢量绘图。

一旦你安装了，你会发现工具栏中帮助(?)图标的右边有一个图标。

小开

与其添加会增加APK文件大小的库，我建议你使用< a href = " http://inloop.github。io/svg2android/" rel="nofollow noreferrer">Android SVG to VectorDrawable . io/svg2android/" rel="nofollow noreferrer">将SVG转换为可绘制的。

并在Gradle中添加vectorDrawables.useSupportLibrary = true。

小开

1. 您需要将SVG转换为XML，以便在Android项目中使用。

1.1你可以用< a href = " http://inloop.github。io/svg2android/" rel="nofollow noreferrer">Android SVG to VectorDrawable . io/svg2android/" rel="nofollow noreferrer">来实现，但是它不支持SVG的所有特性，比如一些渐变。

1.2你可以通过Android工作室进行转换，但是它可能会使用一些只支持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" />

2. 使用支持这些特性的库SVG-Android

在应用程序类中添加以下代码:

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

然后像这样使用SVG:

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_android_red"/>
小开
  1. 右键单击可绘制目录，按新，然后转到向量的资产
  2. 将资产类型从剪贴画更改为本地
  3. 浏览文件
  4. 输入大小
  5. 然后单击下一个，然后单击完成

您可用的SVG图像将在可绘制目录中生成。

小开

您可以使用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)
}

然后在你的活动或片段中调用这个方法:

your_image_view.loadSvg("your_file_name.svg")
小开

试试这个:

Enter image description here

下一步:

Enter image description here

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

Enter image description here

小开

使用线圈图书馆加载svg。注意，这个库是建立在Kotlin协程之上的。

导入扩展库:

implementation("io.coil-kt:coil-svg:2.1.0")

并在构造组件注册表时将解码器添加到组件注册表

ImageLoader:
val imageLoader = ImageLoader.Builder(context)
.components {
add(SvgDecoder.Factory())
}
.build()

就是这样!

点击这里获取更多信息。


提交答案