110

I have made the opposite conversions (SVG to VectorDrawable) manually or using web tools.

But I am having hard time to do the opposite thing. I have VectorDrawable but I am not sure how to convert it to SVG and I can find zero online tools to do it.

Does anyone have experience with this and what are the steps or tools to do it?

Machavity
  • 30,841
  • 27
  • 92
  • 100
sandalone
  • 41,141
  • 63
  • 222
  • 338

2 Answers2

204

Steps I follow:

android:pathData replaced with d

android:fillColor replaced with fill

android:strokeColor replaced with stroke

android:strokeWidth replaced with stroke-width

android:fillType replaced with fill-rule

A path in the VectorDrawable without fillColor is fill="none" in SVG.

android:viewportHeight="24" android:viewportWidth="24" is viewBox="0 0 24 24" in SVG.

Example

Vector Drawable

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <path
        android:fillColor="#ffffff"
        android:pathData="M12,3L2,12h3v8h2.5v-0.8c0-1.5,3-2.2,4.5-2.2s4.5,0.8,4.5,2.2V20H19v-8h3L12,3zM12,15.2c1.2,0-2.2-1-2.2-2.2 s1-2.2,2.2-2.2s2.2,1,2.2,2.2S13.2,15.2,12,15.2z" />
    <path android:pathData="M0,0h24v24H0V0z" />
</vector>

SVG

<svg xmlns="http://www.w3.org/2000/svg"
    width="24" 
    height="24" 
    viewBox="0 0 24 24" >

    <path 
        fill="#ffffff"
        d="M12,3L2,12h3v8h2.5v-0.8c0-1.5,3-2.2,4.5-2.2s4.5,0.8,4.5,2.2V20H19v8h3L12,3zM12,15.2c1.2,0-2.2-1-2.2-2.2 s1-2.2,2.2-2.2s2.2,1,2.2,2.2S13.2,15.2,12,15.2z" />
    <path d="M0,0h24v24H0V0z" fill="none"/>
</svg>
GGets
  • 416
  • 6
  • 19
Kuti Gbolahan
  • 2,379
  • 1
  • 9
  • 17
  • That was a great help, but your SVG is missing the closing tag I think. Otherwise doesn't seem to validate, or open in Illustrator. – Aonghus Shortt Oct 01 '17 at 21:38
  • XSLT can help to automate this job. It's pretty simple, but I don't know how to handle prefix "android:" for attributes. So, I remove all occurrences of "android:" and then transform vector drawable to raw SVG. Here is [XSL](https://gist.github.com/ok3141/1285e56f44d7e47b9a22e664406a5fab) template; I tried it [on this site](https://www.freeformatter.com/xsl-transformer.html) and it works for me. – Oleksii K. Jun 06 '18 at 11:27
  • what does tint: in vector drawable map to in svg? – andylamax Aug 09 '19 at 08:29
  • 3
    color "FF000000" is not working, should be change to "000000" – Trần Thị Diệu My Nov 19 '19 at 01:51
  • One more: `android:fillType` is `fill-rule` in **SVG** – GGets Feb 06 '20 at 00:30
  • 2
    Another for the list: the android tag is in SVG, and if you want to handle android:translateX or android:translateY you'll need to use the transform="translate()" attribute in its place. – NickGlowsinDark Feb 25 '20 at 00:48
  • https://www.joydeepdeb.com/tools/find-replace.html might come in handy for this solution – Shikhar Oct 14 '20 at 04:49
  • In my case it working it convert to svg online https://shapeshifter.design/ – Bhaumik Surani Oct 24 '20 at 06:16
  • `android:fillAlpha` is `fill-opacity`. Source: https://stackoverflow.com/a/6042577/3151675 – Tamás Sengel May 03 '22 at 14:09
55

The VectorDrawable format is pretty similar to SVG.

You can find the documentation of the VectorDrawable format here, and the documentation of the SVG format here.

I just written this Python script which converts a vector drawable xml, to a svg. It doesn't cover all the vector drawable proprieties, but it works with the most common ones. You have only to drop your xml files onto the script, and the files will be converted.

Hyperion
  • 568
  • 4
  • 5
  • its for linux? drop nothing does –  Feb 25 '18 at 21:10
  • @СергейГрушин I tried the script on Windows but it should work on Linux too. You should check if there is an error into the console. Maybe the xml module it's not installed? In this case you should run `pip install xml` – Hyperion Feb 26 '18 at 21:25
  • 1
    script works only in command-line. Thanks. But I want drag&drop, so I create desktop shortcut with `Exec=python /opt/utils/xml2svg.py %U` Now I can drag files and drop him on the desktop shortcut :) Also I edited 2 things: now script delete source xml files after converting, svg file name now without `.xml` pre-extension. –  Feb 27 '18 at 05:37
  • 8
    FYI, @Hyperion, I forked your repository to add better handling of colours: https://github.com/RohanTalip/VectorDrawable2Svg – Rohan Talip Dec 26 '18 at 22:06
  • 1
    Thanks for the py script! – ingh.am Oct 05 '20 at 15:04
  • I made a really simple website just to do that. https://vd.floo.app/ – Seanghay Jul 18 '23 at 06:32