59

I want to convert SVG files to Android Vector Drawable XMLs. I need the structure of the SVG. To the extend that the SVG groups multiple elements together, I need that grouping to also be reflected in the Android Vector Drawable.

Unfortunately, the tools I found to do SVG to Vector Drawable conversions try to minimize the file size in a way that gets rid of existing grouping in the structure of the file.

Is there a smart way to do the conversion that leaves the grouping tree intact?

Christian
  • 25,249
  • 40
  • 134
  • 225
  • 1
    *Is there an automatic tool to do the conversion that leaves the grouping tree intact?* [is this question on-topic?](https://stackoverflow.com/tour) – Selvin Sep 27 '17 at 20:42
  • @Selvin : StackOverflow is about questions about how to solve a given problem that arises in software development. I'm also okay if the solution to the problem isn't a pointer to a particular tool. My question is problem focused and not about recommending tools. – Christian Sep 27 '17 at 20:54
  • write your own solution ... I would do a program which: 1. move every group from svg to single svg file 2. run a tool for svg to vector converiosn 3. merge them back ... – Selvin Sep 27 '17 at 20:57
  • 2
    @Selvin : Feel free to write an answer if you think that's the best way to solve the problem. – Christian Sep 27 '17 at 21:12

5 Answers5

130

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

Hitesh Sahu
  • 41,955
  • 17
  • 205
  • 154
  • 7
    At the time this question was asked that option did exists but it destroyed the group structure. Are you saying that isn't the case anymore? – Christian May 23 '19 at 13:42
  • `Vector Asset` is not available as an option for me. Are you in a special view? Is the latest version different? – testing Dec 10 '20 at 15:02
  • 1
    I wasn't able to see that context menu item until "android" folder was opened directly. Not parent, where "android" folder is located. This can happen if you are opening Flutter or maybe ReactNatie project folder. – Fikret Jan 17 '21 at 17:31
  • 3
    Good, however does not work if your SVG includes text. For that https://svg2vector.com/ works better. – Hashim Akhtar Jan 27 '21 at 17:50
  • I'll confirm that in 2021, it still works. I was able to import an `.svg` into a `.xml` that was put into my `app/res/drawable/`. – Ben Butterworth Aug 16 '21 at 13:16
  • The SVG importer doesn't support the full spec, always gives random unsupported errors – David Aleksanyan Aug 27 '22 at 15:55
  • FIgma has a plugin for it, but I'm not sure about the details. I used it because the svgs were in Figma anyway, and the plugin was less cumbersome than the Android studio import method imho. – Joachim Nov 14 '22 at 11:24
45

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

swerly
  • 2,015
  • 1
  • 14
  • 14
  • Great, it does keep the group structure :) – Christian Sep 28 '17 at 18:12
  • Awesome, glad it worked for you. If you get the chance, try the animating features. Makes it really easy to create some sweet icons :) – swerly Sep 29 '17 at 18:52
  • 1
    The built-in Android Studio option always gave errors with the vector files I had. Using this tool avoided that issue. – Ben Mar 18 '22 at 22:35
  • You're a lifesaver! I've bookmarked this link twice, just in case :-) – andbi Nov 02 '22 at 15:36
17

You can convert an SVG file to drawable vector using below website link https://svg2vector.com/

user2694064
  • 357
  • 2
  • 4
  • 1
    Works, but you can only convert a few until it requires you to pay $29 per month(!) to use it – Joachim Nov 11 '22 at 14:11
8

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.

Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
Vempati Satya Suryanarayana
  • 317
  • 4
  • 4
  • Pasting path data from svg to vector in Android Studio gives a lot of useful info *"Very long vector path (1965 characters), which is bad for performance. Considering reducing precision, removing minor details or rasterizing vector. less... (Ctrl+F1) Using long vector paths is bad for performance. There are several ways to make the pathData shorter: * Using less precision * Removing some minor details * Using the Android Studio vector conversion tool * Rasterizing the image (converting to PNG)"* – samus Sep 20 '18 at 14:27
  • I scaled a path down to 24px in GIMP after tracing it with the "Fuzzy Select Tool" and it became extremely rough and pixelated, however this doesn't matter when importing the SVG path data into Asset Studio since it is apparently interpolated (cubic splines or something), so the preview rendered smooth. *Select -> Feather* helps to smooth out rough edges of fuzzy selection. – samus Sep 20 '18 at 15:13
  • 1
    This answer also helps with converting a drawable XML to SVG. – Jerry101 Oct 18 '21 at 23:33
-1

Inkscape can save vectors to Android Vector Drawable using this extension, which adds the format to the Save As dialog.

Skylar Ittner
  • 802
  • 11
  • 26