SVG to Android VectorDrawable

How to convert an SVG to an Android vector drawable

1. Choose your SVG, drop it on the box, or paste SVG code.
2. Compare the two pictures. The second is drawn from the paths that went into the XML, and the page tells you whether it matches the first.
3. Read the notes, if there are any: they name what was not carried over.
4. Set the width in dp, download the .xml file and put it in your project’s res/drawable folder.

Why an SVG has to be converted

Android does not use SVG files as drawables. Its vector format is VectorDrawable: an XML file with a <vector> element that holds <path> elements, each with its outline in android:pathData. The path data is written the same way as an SVG path’s d, which is where the likeness ends. A VectorDrawable has no rectangles, circles or lines, no style sheets, no text and no <use>. So converting is mostly a matter of turning everything an SVG can say into plain paths.

What the converter does

• Shapes become paths: rectangles (rounded ones too), circles, ellipses, lines, polylines and polygons. Arcs are written as cubic curves of no more than a quarter turn each, which stay within 0.03% of the radius.
• Transforms are worked into the coordinates. Every translate, rotate, scale and matrix on a shape or on the groups round it is applied to the points, so the output has no groups at all.
• The viewBox becomes the viewport. android:viewportWidth and viewportHeight take its size, and a viewBox that does not start at 0, 0 is moved there. The width and height become dp, one for each pixel of the SVG’s own size, unless you set another width.
• Styles are resolved. Fill, stroke, widths and opacities are read from attributes, style attributes and style sheet rules that pick by element name, class or id, with inheritance from groups. Colours in any CSS notation become #AARRGGBB, with opacity folded into the first two digits.
• Each <use> is drawn out as its own copy of the shape it points to.
• Linear and radial gradients are written as <gradient> elements, with their start, end and centre worked out in viewport coordinates, including gradients measured against a shape’s own box.

What it leaves out

• Text. A VectorDrawable cannot hold it. Convert text to paths (outlines) in your editor first.
• Embedded pictures, filters such as blur and shadow, patterns, markers such as arrowheads, and HTML in a foreignObject.
• Clip paths and masks. The shape is drawn whole. VectorDrawable has a clip-path element of its own, but this converter does not write it.
• Dashes. The format has none, so a dashed line is drawn solid.
• CSS beyond the simple cases: selectors with attributes or pseudo-classes, and transforms set in CSS instead of the transform attribute.
• Three things are approximated, and say so: opacity on a group is given to each shape in it, which differs only where they overlap; a stroke on a shape stretched more one way than the other is drawn at an even width; a radial gradient squashed into an oval, or with an off-centre focus, is drawn round and centred.

Android versions, size and file name

VectorDrawable arrived in Android 5.0 (API 21). Two things this converter may write are newer: gradients and the even-odd fill rule (android:fillType) both need Android 7.0 (API 24). The page tells you when your file uses either.

A vector scales to any size, but Android’s guidance is to keep a vector drawable within 200 × 200 dp, because it is redrawn from its paths and large ones are slow. Icons are usually 24 dp. Changing the width here changes only the size the drawable asks for; the path coordinates and the viewport stay the same.

A drawable’s file name may hold only lower-case letters, digits and underscores, and must start with a letter. The download is named after your file with that applied, so “My Icon.svg” is saved as my_icon.xml.

Questions

Related

• SVG optimizer
• SVG viewer, to see what a file is made of
• SVG to PNG, for icons that must be pixels
• What is an SVG file?
• All tools