Draw an SVG to an Android Canvas with Kotlin

An Android ImageView can display bitmap and drawable resources. A standard SVG file, however, cannot be passed directly to an ImageView or Canvas in the same way as a PNG or an Android vector drawable.

SVG, or Scalable Vector Graphics, describes vector-based graphics in XML. Because the image is defined using shapes and paths instead of a fixed pixel grid, it can be rendered at different sizes without the pixelation associated with enlarging a bitmap.

This tutorial uses the AndroidSVG library to read an SVG from res/raw, render it onto an Android Canvas, and display the resulting Bitmap in an ImageView.

SVG rendered in an Android ImageView

The following screenshot shows the SVG image rendered by the sample Android application.

Android Draw SVG to Canvas ImageView

Android SVG-to-Canvas project structure

Place the SVG file in the module’s app/src/main/res/raw directory. Android generates a resource identifier for the file, allowing it to be accessed as R.raw.file_name.

Android Draw SVG to Canvas ImageView

Android supports its own VectorDrawable XML format, but that format is not identical to a standard SVG document. This example uses the third-party AndroidSVG library to parse and render the SVG. You may download the JAR file from AndroidSVG JAR Download. Follow Add External Jar to Library/Dependencies to add the JAR file to the project.

If the library is available from a repository used by your project, it can instead be declared as a Gradle dependency. Use a library version compatible with the Android and Kotlin versions configured for the application.

Steps to render an SVG on an Android Canvas

Step 1: Place the SVG file in the res/raw folder. Use a lowercase resource name containing only letters, numbers, and underscores.

Step 2: Read and parse the SVG resource with the AndroidSVG SVG class.

</>
Copy
val svg = SVG.getFromResource(resources, R.raw.ic_motorcycle_black_24px)

Step 3: Set the SVG document dimensions when the source document does not contain suitable dimensions or when the rendered output must use a specific size. Use matching width and height ratios if the original aspect ratio must be preserved.

</>
Copy
svg.documentHeight = 600F
svg.documentWidth = 600F

Step 4: Create an ARGB bitmap and construct a Canvas that draws into that bitmap. The bitmap dimensions are pixel values, so avoid creating an unnecessarily large bitmap.

</>
Copy
val bitmap = Bitmap.createBitmap(700,700, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)

Step 5: Ask AndroidSVG to render the parsed document onto the canvas.

</>
Copy
svg.renderToCanvas(canvas)

Step 6: Display the bitmap in the required view. The original example assigns a BitmapDrawable as the background of the ImageView.

</>
Copy
imageV.background = BitmapDrawable(resources, bitmap)

For current Android code, imageView.setImageBitmap(bitmap) is normally clearer when the bitmap is the content of the ImageView. Assigning it as a background and assigning it as image content can produce different scaling behavior.

Complete Kotlin Android SVG Canvas example

Create an Android application with an empty activity, add AndroidSVG to the application module, and place ic_motorcycle_black_24px.svg in app/src/main/res/raw. The original layout and activity used by this example are shown below.

activity_main.xml

</>
Copy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageV"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

MainActivity.kt

</>
Copy
package com.tutorialkart.drawshapeoncanvas

import android.graphics.Canvas
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.graphics.Bitmap
import android.graphics.drawable.BitmapDrawable

import com.caverock.androidsvg.SVG

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Read an SVG from the assets folder
        val svg = SVG.getFromResource(resources, R.raw.ic_motorcycle_black_24px)

        if (svg.getDocumentWidth() !== -1F) {

            // set your custom height and width for the svg
            svg.documentHeight = 600F
            svg.documentWidth = 600F

            // create a canvas to draw onto
            val bitmap = Bitmap.createBitmap(700,700, Bitmap.Config.ARGB_8888)
            val canvas = Canvas(bitmap)

            // canvas - white background
            canvas.drawARGB(0,255, 255, 255)

            // Render our document onto our canvas
            svg.renderToCanvas(canvas)

            // set the bitmap to imageView
            imageV.background = BitmapDrawable(resources, bitmap)
        }
    }
}

Using the SVG bitmap with a current ImageView

The original example uses Android Support Library imports and Kotlin synthetic view access. In a current Android project, use AndroidX and View Binding or findViewById. The rendering sequence itself remains the same.

</>
Copy
val imageView = findViewById<ImageView>(R.id.imageV)
val svg = SVG.getFromResource(resources, R.raw.ic_motorcycle_black_24px)

val widthPx = 600
val heightPx = 600
svg.documentWidth = widthPx.toFloat()
svg.documentHeight = heightPx.toFloat()

val bitmap = Bitmap.createBitmap(
    widthPx,
    heightPx,
    Bitmap.Config.ARGB_8888
)
val canvas = Canvas(bitmap)

svg.renderToCanvas(canvas)
imageView.setImageBitmap(bitmap)

This version makes the bitmap and SVG document the same size, avoiding the unused border present when a 600-by-600 SVG is rendered into a 700-by-700 bitmap. It also sets the bitmap as the image content rather than as the view background.

Preserving SVG transparency and background color

Bitmap.Config.ARGB_8888 supports an alpha channel. A newly created bitmap is transparent unless a color is drawn onto its canvas. The original example calls drawARGB() with an alpha value of zero, which remains transparent despite the RGB values.

To create an opaque white background before rendering the SVG, draw white with full opacity:

</>
Copy
canvas.drawColor(Color.WHITE)
svg.renderToCanvas(canvas)

Leave out the drawColor() call when the SVG should retain a transparent background.

SVG scaling, aspect ratio, and bitmap memory

  • Use consistent proportions: Setting unrelated document width and height values can stretch the SVG. Calculate the destination dimensions from the SVG’s original aspect ratio when distortion is not acceptable.
  • Render at the required pixel size: A bitmap uses memory based on its pixel dimensions. With ARGB_8888, each pixel generally requires four bytes.
  • Use measured view dimensions: If the result must fill a particular view, render after the view has been measured and use its width and height.
  • Cache repeated results: If the same SVG is displayed repeatedly at the same size, reuse or cache the rendered bitmap instead of parsing and rendering it for every redraw.
  • Avoid blocking frequent UI updates: Large or complex SVG documents can take time to parse and render. Do repeated or expensive preparation away from frame-sensitive drawing code.

Troubleshooting AndroidSVG Canvas rendering

The SVG resource cannot be found

Confirm that the file is inside app/src/main/res/raw and that its name follows Android resource naming rules. For example, motorcycle_icon.svg is valid, while names containing capital letters, spaces, or hyphens are not valid resource names.

The rendered SVG is blank

Check that the bitmap width and height are greater than zero, the SVG was parsed successfully, and the source document contains valid dimensions or a usable view box. Also verify that the graphic color is not the same as the surrounding background.

The SVG is cropped or stretched

Cropping occurs when the SVG is rendered outside the bitmap bounds. Stretching occurs when the assigned width and height do not preserve the source aspect ratio. Use matching destination proportions and ensure that the canvas bitmap is large enough for the rendered document.

The AndroidSVG class is unresolved

Verify that the AndroidSVG dependency was added to the application module and that the project was synchronized. The required import in this example is com.caverock.androidsvg.SVG.

Android SVG-to-Canvas FAQs

Can Android Canvas draw an SVG file directly?

Android Canvas does not directly parse a standard SVG file. The SVG must first be parsed by a compatible library, converted to another supported representation, or supplied as an Android vector drawable when its features are compatible.

What is the difference between an SVG and an Android VectorDrawable?

Both describe vector graphics, but they use different XML formats and do not support exactly the same feature set. An SVG downloaded from the web is not automatically an Android VectorDrawable.

Should the SVG bitmap be an ImageView background or image source?

Use setImageBitmap() when the rendered bitmap is the primary image content. Use the background property only when the bitmap is intended to sit behind other view content. The two approaches use different sizing and scaling behavior.

How can an SVG be rendered without losing transparency?

Create the destination with Bitmap.Config.ARGB_8888 and do not fill the canvas with an opaque color before rendering. The bitmap can then preserve transparent regions from the SVG.

Kotlin Android SVG Canvas QA checklist

  • Confirm that the SVG file is stored in app/src/main/res/raw with a valid Android resource name.
  • Confirm that AndroidSVG is included in the application module and com.caverock.androidsvg.SVG resolves.
  • Test SVGs with and without explicit width, height, and view-box values.
  • Verify that the chosen output dimensions preserve the required aspect ratio.
  • Check the result on both light and dark backgrounds, especially when the SVG contains transparency.
  • Confirm that bitmap dimensions are appropriate for the target view and do not allocate unnecessary memory.
  • Test the current AndroidX or View Binding implementation if the legacy sample is adapted to a new project.

Summary of rendering SVG to Canvas in Kotlin

To draw a standard SVG on an Android Canvas, parse the resource with AndroidSVG, create a bitmap-backed canvas, set suitable document dimensions, and call renderToCanvas(). The completed bitmap can then be displayed with an ImageView. In this Kotlin Android Tutorial, the same process is demonstrated with both the original sample and a current setImageBitmap() usage pattern.