svgby garagemade

Convert an SVG to a Jetpack Compose ImageVector

svgby garagemade
0,0browser-local
Drop an SVG to start
or pick a sample on the home page
Open in the full editor

Jetpack Compose draws vectors as an ImageVector, not as SVG or XML. This converts the SVG above into a Kotlin ImageVector — the builder plus a path DSL — exposed as a val you can hand straight to Icon or Image. There's no res/drawable file and no XML to maintain, and it all happens in your browser.

How to convert an SVG to Compose

  • Load your SVG above, or edit the curved sample. It stays in your browser.
  • Open the Code tab and choose Jetpack Compose.
  • Set the name — it becomes the val and the builder name.
  • Copy the Kotlin, or download Name.kt.

What the code looks like

  • An ImageVector.Builder with defaultWidth and defaultHeight in dp and viewportWidth/Height taken from the viewBox.
  • One path { } block per shape, its geometry expanded to the DSL: moveTo, lineTo, curveTo, quadTo, close.
  • SolidColor fills and, where present, a stroke with width, cap, and join.
  • A lazily built, cached val — the pattern the Material icons use — so referencing the imagevector stays cheap.

When to reach for an ImageVector

Keeping icons in Kotlin removes the XML round-trip and lets small, tweakable vectors sit next to the code that draws them — handy for a design system or a screen with a few bespoke glyphs. The unsupported list matches the VectorDrawable route: gradients, masks, clip paths, filters, text, and images are dropped and reported, because a compose path describes solid fills and strokes rather than a full SVG feature set.

Frequently asked questions

What does it output?
Kotlin: an ImageVector built with ImageVector.Builder and the path DSL (moveTo, curveTo, close), exposed as a val you can hand to Icon or Image.
Do I still need a drawable XML?
No. This is the code-only route — the vector lives in Kotlin, so there is no res/drawable XML to keep in sync with your code.
How do I use the generated val?
Pass it straight in: Icon(imageVector = YourIcon, contentDescription = null). The vector is built lazily and cached behind a backing property.
Does it handle curves and strokes?
Yes. Cubic and quadratic curves become curveTo and quadTo, arcs are converted first, and any stroke carries its width, cap, and join.
Which features are unsupported?
Gradients, patterns, masks, clip paths, filters, text, and embedded images are stripped and reported, the same as the VectorDrawable route; a Compose path describes solid fills and strokes.
Do you upload my SVG?
No. The Kotlin is generated in your browser from the SVG you loaded. The file is never uploaded or stored.
Is it free?
Yes. No signup, no watermark.

Related conversions