Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert VectorDrawable to SVG [closed]

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?

like image 607
sandalone Avatar asked Jul 06 '17 12:07

sandalone


1 Answers

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> 
like image 173
Kuti Gbolahan Avatar answered Sep 18 '22 14:09

Kuti Gbolahan