Convert VectorDrawable to SVG [closed]

Question

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?

Unfleshly

Answer 1

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>

Ritenuto

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. – Mover

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 template; I tried it on this site and it works for me. – Healthy

what does tint: in vector drawable map to in svg? – Kilter

color "FF000000" is not working, should be change to "000000" – Solent

One more: android:fillType is fill-rule in SVG – Monahan

Another for the list: the android <group> tag is <g> 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. – Suppurate

joydeepdeb.com/tools/find-replace.html might come in handy for this solution – Breen

In my case it working it convert to svg online shapeshifter.design – Belden

android:fillAlpha is fill-opacity. Source: https://mcmap.net/q/73855/-svg-fill-color-transparency-alpha – Archipelago

Answer 2

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.

Squeeze

its for linux? drop nothing does – Gigot

@СергейГрушин 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 – Squeeze

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. – Gigot

FYI, @Hyperion, I forked your repository to add better handling of colours: github.com/RohanTalip/VectorDrawable2Svg – Composure

Thanks for the py script! – Shelashelagh

I made a really simple website just to do that. vd.floo.app – Dung