What Is The Easiest Way to Use Svg Images in Android

What is the easiest way to use SVG images in Android?

First, you need to import SVG files by the following simple steps.

 1. Right click on your project's drawable folder (app/res/drawable)
 2. Click New
 3. Select Vector Asset

If the image is available on your computer, select the local svg file.

After that, select the image path. An option to change the size of the image is also available on the right side of the dialog if you want to. In this way, the SVG image is imported into your project.

After that, for using this image, use the same procedure:

@drawable/ic_image_name

What are best practices for using SVG icons on Android?

For Android older than Lollipop, your best practice for SVG on Android is going to be to use a tool to convert your SVG to PNG at the size(s) you're interested in. Existing SVG support for Android is not comprehensive of what you're likely to find in an SVG file, and even if it were, the support is not built into the OS so using them directly for icons is definitely out.

Beginning with Lollipop (API 21) see What are best practices for using SVG icons on Android?. Thanks to @MarkWhitaker @AustynMahoney for pointing this out.

How to use SVG image in ImageView

In new Android Studio there is possibility to import SVG to XML file, so You don't need to use external library.

In drawable right click -> New -> Vector Asset -> Local SVG file.

Then You use it normally as other drawables:

android:src="@drawable/btn_image"

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

Please refer to Having issue on Real Device using vector image in android. SVG-android

In the users post he asks a similar question and suggest he uses:

Create a member variable for the ImageView in your layout file;

private ImageView mImageView;

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

Download the image

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

Then Apply the drawable to the 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 is available at https://github.com/pents90/svg-android

---

Related Topics