Is there a precompiled converter from vector drawa...

# compose

[Vsevolod Ganin]

Is there a precompiled converter from vector drawable (or svg) to `ImageVector`’s builder code? I doubt that material icons from library are done by hand. I have a svg and I want to avoid converting to vector drawable altogether since it will convert to ImageVector in runtime anyway

[Mark Murphy]

I think https://github.com/DevSrSouza/svg-to-compose has the sort of thing that you are looking for

(FWIW, I mentioned it briefly in https://jetc.dev/issues/039.html a few weeks ago)

[Vsevolod Ganin]

Thanks, that’s exactly what I was looking for. It uses a bit outdated Compose API but it’s trivial to fix by hand. I feel like I should contribute, the guy did awesome job :)

[Chris Sinco [G]]

We're looking into it but for now that library encapsulates what you are looking for

[Chris Sinco [G]]

Since it extracts what we already do in our build scripts for generating the Material icons

[Chris Sinco [G]]

What level of support would you expect/desire?

[Bradleycorn]

Thanks @Chris Sinco [G]. In our case, we really have 2 use cases:
1. We are converting an existing app to Compose. We have a lot of Android XML vector drawables (probably 30 - 50) that we’d like to convert over `ImageVector`s. Some may be too big/complex, but most are small, icon type drawables.
2. Going forward, a way to convert svg files provided by our design team to `ImageVector`s. We basically need a tool that works the same as the Vector Asset tool in Android Studio, which can convert an svg to an Android XML drawable, but instead outputs a .kt file with an ImageVector definition.
Our designers are not programmers and do not have the knowledge or skills to write ImageVector Kotlin code directly. And our developers are not designers and do not have the knowledge or skills properly use paths, curves, lines, etc to build an ImageVector from a design mockup. That leaves us with the need for a tool that can turn svg files into ImageVector kotlin code.

[Chris Sinco [G]]

Gotcha thanks for the clarification! You listed several points that we are currently investigating so glad there is already alignment with our current plans 🙂

[Chris Sinco [G]]

Curious, what kind of things are you doing/manipulating with the ImageVector format?

[Thomas]

Is there any reason to use ImageVector instead of just xml vectors? Are there any benefits like performance or so?

[Bradleycorn]

@Chris Sinco [G] @Thomas.. A Couple things:
1. If I understand things correctly (and it’s very possible that I don’t) … xml drawable based painters are converted to ImageVector before rendering anyway, so why not just go ahead and put them in that format to begin with…
2. Our use cases are pretty basic display of images and icons. We don’t do much manipulation, at least for now.
3. We use them mostly for icons. And in many occasions in our app, we use the Material Icons (<http://Icons.Filled.xxx|Icons.Filled.xxx>) which are `ImageVector`s. But we do have some of our own icons as well. Now consider something like a BottomNavBar. We have a NavItem data class that represents an item in the Nav Bar. We’d like it to have a label and an icon. But when some icons are material icons (ImageVector ) and others are Xml drawables (referenced with an @DrawableRes Int) it becomes cumbersome to define a simple NavItem data class with a String label and an ImageVector icon.
4. We do have one interesting use case where we build an ImageVector on the fly at runtime. Our app is a horse racing app, and we have to show the saddle cloths of the horses in each race. There are 48 different saddle cloths, but they are all either a solid color or one of 3 patterns that use 2 colors. Two triangles, a set of vertical stripes, or a set of horizontal stripes. (See attached screen shot of a preview). These are basic enough that I was able to write 3 generic composables that take in 2 colors, and build an ImageVector for the appropriate pattern. It then gets used as the background on a Box to render the saddle cloth with the horse’s number. This use case doesn’t have any requirements for a converter like we’ve been discussing, but it is one of the ways in which we are using ImageVector’s in our app.