Android SVG Rendering

Table of contents:

Motivation

This programming exercise shows how easy it is to include SVG graphics into your project. A good user experience also depends on well scaled images which do not contain compression artefacts or look pixelated.

Android SVG Library

A good and maintained SVG library is AndroidSVG.

Update your build.gradle

dependencies {
    compile 'com.caverock:androidsvg:1.2.1'
}

A sample test file is test1.svg is shown below. Place it into the res/raw folder.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

Load SVGs

SVGs can be loaded into simple ImageViews. They are scaled properly according to the predefined size.

The activity XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_svg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.mat8854.prototype.ActivitySVG">

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/scrollView" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/imgVector1" />

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:id="@+id/imgVector2" />

        <ImageView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:id="@+id/imgVector3" />

        </LinearLayout>

    </ScrollView>

</RelativeLayout>

The activity code:

package net.mat8854.prototype;

import android.graphics.drawable.Drawable;
import android.graphics.drawable.PictureDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

import com.caverock.androidsvg.SVG;
import com.caverock.androidsvg.SVGParseException;

public class ActivitySVG extends AppCompatActivity {

    private ImageView imgVector1;
    private ImageView imgVector2;
    private ImageView imgVector3;

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

        getSupportActionBar().setTitle("SVG Example");

        imgVector1 = (ImageView)findViewById(R.id.imgVector1);
        imgVector2 = (ImageView)findViewById(R.id.imgVector2);
        imgVector3 = (ImageView)findViewById(R.id.imgVector3);

        loadSVGs();
    }

    private void loadSVGs()
    {
        imgVector1.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imgVector2.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imgVector3.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        try
        {
            SVG svg = SVG.getFromResource(this, R.raw.test1);
            Drawable drawable = new PictureDrawable(svg.renderToPicture());
            imgVector1.setImageDrawable(drawable);
            imgVector2.setImageDrawable(drawable);
            imgVector3.setImageDrawable(drawable);
        }
        catch(SVGParseException e)
        {
            e.printStackTrace();
        }
    }
}