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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With