Converting SVG File To Android Vector Drawable XML While Keeping The Group Structure In Place


Answer :

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:



enter image description here



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).



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.



Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable