svgsvgsvg.com

SVG to Android Vector Drawable

Paste SVG markup and get Android VectorDrawable XML — basic shapes converted to paths, colors and strokes mapped to android: attributes. Runs entirely in your browser.

What the converter does

  • Dimensions — reads width, height, and viewBox to set android:width/height in dp and the viewport size.
  • Shapes to paths — rect, circle, ellipse, line, polygon, and polyline become path data, since VectorDrawable supports only <path>.
  • Colors & strokes — fill, stroke, and stroke width map to android:fillColor, strokeColor, and strokeWidth, with opacity folded into the alpha channel.
  • Inheritance — fill and stroke set on a parent <g> or the root cascade down to child shapes.

Frequently Asked Questions

What is a VectorDrawable?+

VectorDrawable is Android's native XML format for vector graphics — the equivalent of an SVG for Android apps. A single <vector> element scales cleanly to every screen density, so you ship one file instead of multiple PNGs. Save the output as an XML file in your res/drawable folder and reference it like any other drawable.

Which SVG elements are supported?+

Paths are passed through directly. Basic shapes — rect (including rounded corners), circle, ellipse, line, polygon, and polyline — are converted to equivalent path data, since VectorDrawable only supports <path>. Fill color, stroke color, stroke width, fill-opacity, stroke-opacity, and the even-odd fill rule are mapped to their android: attributes.

What is not converted?+

Gradients, filters, clip paths, masks, text, embedded images, and CSS classes are not translated — VectorDrawable has no direct equivalent for most of them. currentColor and url() paint references cannot resolve to a fixed color, so those fills are omitted. Flatten or expand such features in your SVG editor before converting.

How are colors formatted?+

Colors are normalised to Android hex form — #RRGGBB when fully opaque, or #AARRGGBB when opacity is involved (fill-opacity and stroke-opacity are folded into the alpha channel). Named colors and rgb()/rgba() values are converted too.

Is my SVG uploaded to a server?+

No. The conversion runs entirely in your browser using the built-in DOM parser. Your SVG markup never leaves your device.

Related Tools

SVG to React Component
Convert SVG markup into a React function component with JSX attributes, forwarded props, and optional TypeScript types.
→
SVG to Vue Component
Convert SVG markup into a Vue 3 single-file component with script setup, typed props, and v-bind attrs. JavaScript or TypeScript output.
→
SVG to Svelte Component
Convert SVG markup into a Svelte 5 component with $props() runes, typed width and height props, and attribute forwarding via spread.
→

How to use

  • Paste your SVG markup — the VectorDrawable XML appears instantly.
  • Copy the result and save it as an .xml file in res/drawable.
  • Reference it like any drawable, e.g. @drawable/my_icon.
  • Flatten gradients, text, and masks in your SVG editor first — they are not converted.