android - android:load svg file from web and show it on image view

Question

我想从网上加载一个 svg 文件并在 ImageView 中显示这个文件。对于非矢量图像，我使用Picasso库。

是否也可以将此库用于 svg 文件？
有没有办法从网络加载 svg 文件并在 ImageView 中显示它？
我使用svg-android库来显示 svg 文件，但我不知道如何从网络获取 svg 图像，该库的所有示例都使用本地文件。

Answer 1

更新：对于较新的版本，请查看 Glide 示例（https://github.com/bumptech/glide/tree/master/samples/svg）

-

您可以使用 Glide ( https://github.com/bumptech/glide/tree/v3.6.0 ) 和 AndroidSVG ( https://bitbucket.org/paullebeau/androidsvg )。

还有一个来自 Glide 的示例：https ://github.com/bumptech/glide/tree/v3.6.0/samples/svg/src/main/java/com/bumptech/svgsample/app

设置 GenericRequestBuilder

requestBuilder = Glide.with(mActivity)
    .using(Glide.buildStreamModelLoader(Uri.class, mActivity), InputStream.class)
            .from(Uri.class)
            .as(SVG.class)
            .transcode(new SvgDrawableTranscoder(), PictureDrawable.class)
            .sourceEncoder(new StreamEncoder())
            .cacheDecoder(new FileToStreamDecoder<SVG>(new SvgDecoder()))
            .decoder(new SvgDecoder())
                    .placeholder(R.drawable.ic_facebook)
                    .error(R.drawable.ic_web)
            .animate(android.R.anim.fade_in)
            .listener(new SvgSoftwareLayerSetter<Uri>());

将 RequestBuilder 与 uri 一起使用

Uri uri = Uri.parse("https://de.wikipedia.org/wiki/Scalable_Vector_Graphics#/media/File:SVG_logo.svg");
            requestBuilder
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                            // SVG cannot be serialized so it's not worth to cache it
                    .load(uri)
                    .into(mImageView);

Answer 2

请参阅在 android 中使用矢量图像在 Real Device 上遇到问题。SVG-安卓

在用户帖子中，他提出了类似的问题并建议他使用：

在布局文件中为 ImageView 创建一个成员变量；

private ImageView mImageView;

// intialize in onCreate(Bundle savedInstanceState)
mImageView = (ImageView) findViewById(R.id.image_view);

下载图片

private class HttpImageRequestTask extends AsyncTask<Void, Void, Drawable> {
    @Override
    protected Drawable doInBackground(Void... params) {
        try {


            final URL url = new URL("http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg");
            HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
            InputStream inputStream = urlConnection.getInputStream();
            SVG svg = SVGParser. getSVGFromInputStream(inputStream);
            Drawable drawable = svg.createPictureDrawable();
            return drawable;
        } catch (Exception e) {
            Log.e("MainActivity", e.getMessage(), e);
        }

        return null;
    }

    @Override
    protected void onPostExecute(Drawable drawable) {
        // Update the view
        updateImageView(drawable);
    }
}

然后将drawable应用到Imageview

@SuppressLint("NewApi")
private void updateImageView(Drawable drawable){
    if(drawable != null){

        // Try using your library and adding this layer type before switching your SVG parsing
        mImageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mImageView.setImageDrawable(drawable);
    }
}

SVGParser 可在https://github.com/pents90/svg-android获得

Answer 3

使用此Glide based library加载 xml

添加依赖

  compile 'com.github.ar-android:AndroidSvgLoader:1.0.0'

对于最新的 android 依赖 Gradle，请改用它

implementation 'com.github.ar-android:AndroidSvgLoader:1.0.0'

主.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/ivimage"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_item);            

        ImageView image = (ImageView) findViewById(R.id.ivimage);

        SvgLoader.pluck()
                .with(this)
                .setPlaceHolder(R.mipmap.ic_launcher, R.mipmap.ic_launcher)
                .load("http://www.clker.com/cliparts/u/Z/2/b/a/6/android-toy-h.svg", image);

    }

    @Override protected void onDestroy() {
        super.onDestroy();
        SvgLoader.pluck().close();
    }
}

Answer 4

Hope the below code is useful for you.

1. Add this dependency in build.gradle

   implementation 'com.github.corouteam:GlideToVectorYou:v2.0.0'

2. Now start working in MainActivity.java

   ImageView image = (ImageView) findViewById(R.id.ivimage);

   String url= https://your_url/banking.svg GlideToVectorYou.init().with(this).load(Uri.parse(url),image);

Answer 5

Kotlin 和线圈库从 URL 加载 SVG：

1. 在 build.gradle 中添加 Kotlin 图像加载库（模块：app）（它还支持其他图像）：

摇篮：

implementation 'io.coil-kt:coil:1.4.0'
implementation 'io.coil-kt:coil-svg:1.4.0'

或者

克特斯：

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

2. 将以下扩展函数添加到项目的任何 Kotlin 文件中（在类之外而不是类内）：

这里我在 xml 中使用了 AppCompatImageView，如果你只使用 ImageView 将 AppCompatImageView 替换为 ImageView 从下面的函数。

fun AppCompatImageView.loadSvgOrOther(myUrl: String?, cache: Boolean = true, errorImg: Int = R.drawable.logo_round // Place any error image from your drawable) {

myUrl?.let {
    if (it.lowercase().endsWith("svg")) {
        val imageLoader = ImageLoader.Builder(this.context)
            .componentRegistry {
                add(SvgDecoder(this@loadSvgOrOther.context))
            }.build()

        val request = ImageRequest.Builder(this.context).apply {
            error(errorImg)
            placeholder(errorImg)
            data(it).decoder(SvgDecoder(this@loadSvgOrOther.context))
        }.target(this).build()

        imageLoader.enqueue(request)
    } else {
        val imageLoader = ImageLoader(context)

        val request = ImageRequest.Builder(context).apply {
            if (cache) {
                memoryCachePolicy(CachePolicy.ENABLED)
            } else {
                memoryCachePolicy(CachePolicy.DISABLED)
            }
            error(errorImg)
            placeholder(errorImg)
            data("$it")
        }.target(this).build()

        imageLoader.enqueue(request)
    }
  }
} // loadSvgOrOther

3. 现在使用如下：

   myAppCompatImageView.loadSvgOrOther("https[:]//example[.]com/image.svg")
   

希望这会对想要使用 Kotlin 加载 svg、png、jpg 等图像的人有所帮助。

Answer 6

你可以使用这个库

https://github.com/2coffees1team/GlideToVectorYou

正如他所说：“该库基于 Glide 并提供相同的功能 + svg 支持”。

Answer 7

使用 Glide V4 或更高版本加载 SVG

在 app.gradle > dependencies 添加依赖

implementation 'com.github.qoqa:glide-svg:2.0.4'
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

创建新类 SampleAppGlideModule.java 并转到 Build>Make Project(ctrl+f9)

import android.content.Context;
import android.util.Log;

import androidx.annotation.NonNull;

import com.bumptech.glide.GlideBuilder;
import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;

@GlideModule
public class SampleAppGlideModule extends AppGlideModule {



    @Override
    public boolean isManifestParsingEnabled() {
        return super.isManifestParsingEnabled();
    }

    @Override
    public void applyOptions(@NonNull Context context, @NonNull GlideBuilder builder) {
        super.applyOptions(context, builder);
        builder.setLogLevel(Log.DEBUG);
    }
}

使用 Glide V4 或更高版本加载 SVG

GlideApp.with(this)                      
.load(contentLangModels.get(i).getContentImage()).into(contentLangBinding.ivExtra);

Answer 8

您可以使用线圈图像加载库，

将以下依赖项添加到您的应用级 build.gradle 文件中，

def coilVersion = '1.2.2'
implementation "io.coil-kt:coil:$coilVersion"
implementation "io.coil-kt:coil-svg:$coilVersion"

现在创建这个方法，

fun ImageView.loadImageFromUrl(imageUrl: String) {
val imageLoader = ImageLoader.Builder(this.context)
    .componentRegistry { add(SvgDecoder(this@loadImageFromUrl.context)) 
}
    .build()

val imageRequest = ImageRequest.Builder(this.context)
    .crossfade(true)
    .crossfade(300)
    .data(imageUrl)
    .target(
        onStart = {
            //set up an image loader or whatever you need
        },
        onSuccess = { result ->
            val bitmap = (result as BitmapDrawable).bitmap
            this.setImageBitmap(bitmap)
            //dismiss the loader if any
        },
        onError = {
            /**
             * TODO: set an error drawable
             */
        }
    )
    .build()

imageLoader.enqueue(imageRequest)

}

现在你可以从你的 ImageView 调用这个扩展函数，

imgView.loadImage(imageUrl)

这适用于 svg、png。我还没有尝试过使用 jpgs，但也应该使用它们。