DevForge

SVG to Jetpack Compose

Compose draws vectors through ImageVector.Builder and a small path DSL. Transcribing an icon into it by hand is tedious and easy to get subtly wrong, because every numeric literal in that DSL has to carry an f suffix or it will not compile. This emits the builder, the path calls and the imports.

svg
jetpack compose
options
target
preview

Paste or drop an SVG to preview it.

Technical Guide & Mechanics

Idiomatic ImageVector Generation for Modern Android UI

Jetpack Compose utilizes ImageVector.Builder to define declarative vector graphics. Constructing these vectors manually is tricky because the Compose Path DSL requires strict float literals (every coordinate must carry an f suffix, such as 12.5f) and explicit path groups.

This converter translates SVG paths into Compose path() blocks with correct path fill types, strokes, and alpha levels. Complex SVG transforms are pre-calculated to keep the Kotlin code concise and performant.

The output includes all necessary AndroidX Compose imports, ready to paste directly into your Android Studio project or design system library.

how to use it

  1. 01Paste SVG markup or drop an .svg file.
  2. 02Name the vector.
  3. 03Copy the Kotlin, including the import block at the top.

questions

Why does every number end in f?
The path DSL takes Float, and Kotlin does not widen an integer literal to Float automatically. A missing suffix is a compile error.
Can I tint the icon?
If the source uses currentColor, the output takes a tint parameter. Otherwise the colors are baked in as written.
Are the imports included?
Yes, and only the ones actually used by the generated code.
Does it support Android Material Icons styling?
Yes, the generated ImageVector structure matches the official Android Material icons implementation in Compose.

related