CODEWITHSUNDEEP
androidsvgdata-conversionandroid-vectordrawable
Christian
Christian

Reputation: 26427

Converting SVG file to Android Vector Drawable XML while keeping the group structure in place

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?

Upvotes: 77

Views: 99282

Answers (5)

RunRabbitRun
RunRabbitRun

Reputation: 41

My need involves transparency. The image came from an png file which I converted to svg (png2svg.com). Converting from svg to vector xml in Android Studio results in a darker image. The way I solved it is to add "android:fillType="evenOdd" to every path node.

Now the remaining problem is dark parts in closed areas like the inner portions of letter A or B (if your image involves letters). To solve it is to (1) locate the concerned path node, and (2) remove those dark parts.

Locating the concerned path node is quickly done by trying out one path node at a time by temporarily changing its android:fillColor to "#FFFFFF" (white) for that node to stand out.

Once you have located the concerned path node, try removing the unwanted dark part(s) by removing a segment or segments of its pathData. A segment starts with M and ends with Z. This too is done by trial and error.

This is a quick solution if your image is small and simple like that of a logo.

Upvotes: 0

user2694064
user2694064

Reputation: 415

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

Upvotes: 18

Hitesh Sahu
Hitesh Sahu

Reputation: 45140

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

Upvotes: 160

Vempati Satya Suryanarayana
Vempati Satya Suryanarayana

Reputation: 347

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.

Upvotes: 10

swerly
swerly

Reputation: 2105

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

Upvotes: 52

Related Questions