Converting SVG file to Android Vector Drawable XML while keeping the group structure in place

Question

I want to convert SVG files to Android Vector Drawable XMLs. I need the structure of the SVG. To the extend that the SVG groups multiple elements together, I need that grouping to also be reflected in the Android Vector Drawable.

Unfortunately, the tools I found to do SVG to Vector Drawable conversions try to minimize the file size in a way that gets rid of existing grouping in the structure of the file.

Is there a smart way to do the conversion that leaves the grouping tree intact?

Solution 1

Have you tried Shape Shifter? Its meant as a program to let you animate vectors and svgs easily, but you can import your .svg and export to a Vector Drawable straight away. It should keep your group structure too (but I make no promises as I haven't done so explicitly myself).

Solution 2

Update 2019: There is no need of using any external tool or Heck as pointed by older answers. Android Studio's Asset Studio allows to convert SVG/ PSD to vectors

• Right click on app folder-> New Vector Asset
• Select second option in radio button to create vector from local file as shown in below image.
• Click on folder icon to load local SVG file and it will automatically convert that into vector:

Solution 3

You can convert an SVG file to drawable vector using below website link https://svg2vector.com/

Solution 4

Create a blank xml file. write all attributes of a VectorDrawable except pathdata. Open the SVG file in wordpad. Copy the pathdata and then paste it in the xml file you created.

Example SVG:

 <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 -174 1280 870">
  <g transform="matrix(1 0 0 -1 0 696)">
   <path fill="currentColor"
d="M540 97.4004l-39 21q-47 30 -77 84q-35 62 -34 129q2.10449 95.0107 62 163q74 84 184.5 84t179.7 -86.4004q59.7998 -73.5996 61.2002 -151.199q1.59961 -88.4004 -44.4004 -153.601q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002q18.2002 -2 37.2002 -2.40039
q78 0.400391 157 0.400391l-12 27q-3 4 -23.7998 -5.7998z" />
  </g>

</svg>

Example xml file with same pathdata:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="1280dp"
        android:height="870dp"
        android:viewportWidth="1280.0"
        android:viewportHeight="870.0">

    <path
        android:pathData="

        M540 97.4004l-39 21
        q-47 30 -77 84
        q-35 62 -34 129
        q2.10449 95.0107 62 163
        q74 84 184.5 84 t179.7 -86.4004
        q59.7998 -73.5996 61.2002 -151.199
        q1.59961 -88.4004 -44.4004 -153.601
        q-34 -46.7998 -75.5996 -69.5996l-51.6006 -19.2002
        q18.2002 -2 37.2002 -2.40039 
        q78 0.400391 157 0.400391l-12 27
        q-3 4 -23.7998 -5.7998       "

        android:strokeLineCap="round"
        android:strokeColor="#f00f"
        android:fillColor="#00000000"
        android:strokeWidth="32"/>
</vector>

Note: "z" at the end of pathdata is deleted and the lines were also rearranged manually by me for better readability.

This way you will have to convert the SVGs to xml one at a time and manually.

View more solutions