Convert between AVD and SVG

There are many tools to convert between AVD (Android Vector Drawable) and SVG (Scalable Vector Graphics), but there is also a quick-and-dirty hack to do it manually. This works because AVD is essentially based on SVG, with only a few changes and Android-specific attributes.

For example, this is a simple minus sign in Android Vector Drawable:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="512"
        android:viewportHeight="512"

        android:tint="?attr/colorPrimary">
    <path
            android:fillColor="?attr/colorPrimary"
            android:pathData="M 236,276 H 116 v -40 h 120 40 120 v 40 H 276 Z"/>
</vector>

And this is the equivalent SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="24"
   height="24"
   viewBox="0 0 512 512">
  <path fill="#000000"
     d="M 236,276 H 116 v -40 h 120 40 120 v 40 H 276 Z"/>
</svg>

Here is the cheat-sheet:

  1. Add the XML version header.
  2. Change <vector> to <svg>.
  3. Remove the android: prefix from width and height, and remove the dp unit.
  4. Add a viewBox attribute using the values from viewportWidth and viewportHeight.
  5. Replace Android color references with a hex color (e.g. #000000).
  6. Rename pathData to d.

That’s it – congratulations! Your AVD is now an SVG (and the process works back and forth as well).

Leave a Comment

Your email address will not be published. Required fields are marked *


Scroll to Top