在Android中使用SVG的最简单方法?


165

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

任何人都可以像这样一步一步地介绍最简单的库来在Android中使用SVG的过程,我相信这也会对其他许多人有所帮助。

另外,我使用Android Studio和Illustrator生成图标和图像。



有关如何在android studio中导入svg的简短视频:youtube.com/watch?
v=8e3I

Answers:


336

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

  1. 右键单击可绘制
  2. 点击新
  3. 选择矢量资产

如果您的计算机中有图像,请选择本地svg文件。之后,选择图像路径,并在对话框的右侧提供更改图像大小的选项(如果需要)。以这种方式将svg图像导入到您的项目中之后,使用相同的过程

@drawable/yourimagename

5
简短而有用的答案,当您将外部svg文件导入到项目时不会感到头痛。
CodeToLife

2
正是我想要的东西:)
Mohamed Nageh

5
Next按钮始终处于禁用状态。知道为什么吗?
MRID

那么,我们如何改变svg的颜色?
Oniya Daniel

奇迹般有效。真好!
sud007

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

3
您应该考虑将自己的答案标记为已接受,而不是先前的答案
克里夫·伯顿

1
当我尝试添加SVG文件时,出现错误消息:错误:文件名必须以.xml或.png结尾
Sujay UN

1
为什么imageView static呢?我在这里看到一个巨大的红色错误标志。 SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain); SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder); rainSVG确实包含了thunderImageView
DSchmidt

@DSchmidt只是指向imageview的指针。如果这是我的代码,则可以使用一种称为LoadSVG的方法使整个类静态化。如您所见,将数据加载到无法访问的私有变量毫无意义。
Nasreddine Galfout



3

尝试使用SVG2VectorDrawable插件。转到“首选项”->“插件”->“浏览插件”,然后安装SVG2VectorDrawable。非常适合将sag文件转换为可绘制的矢量。安装完成后,您将在帮助(?)图标右侧的工具栏中找到一个图标。


对我不起作用-SVG文件路径甚至都没有上传到插件中。上面的最佳答案要简单得多,并且可以完成工作。
DaveNOTDavid

很棒的插件-快速将许多svg转换为矢量可绘制对象!
Morten Holmgaard '18

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

如果您拥有@Pallavi的直接方法,为什么还要使用SVG加载程序?使用装载机有什么好处吗?
塔斯林·奥塞尼

@Taslim支持的功能比通常的方式更多。您可以看到支持的功能并查看。
sajad abbasi

0

1)右键单击可绘制目录,然后转到新建,然后转到矢量资产; 2)将资产类型从剪贴画更改为本地; 3)浏览文件; 4)设置大小; 5)然后单击下一步,然后单击完成。目录

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.