What are best practices for using SVG icons on Android? What are best practices for using SVG icons on Android? android android

What are best practices for using SVG icons on Android?


From Lollipop (API 21) onwards, Android defines the VectorDrawable class, for defining drawables based on vector graphics. Android Studio 1.4 adds the "Vector Asset Studio" to make them easier to work with, including an SVG import feature and a new Gradle plugin that generates PNG versions of VectorDrawable icons at build time for API 20 and earlier. There's also a third-party tool for converting SVGs to VectorDrawables. Bear in mind that although vector drawables can be defined in XML, the file format is not SVG and not all SVG files can be successfully converted. Simple graphics like icons should work OK.

If you still need to generate PNGs yourself, you'll need to generate your icons at various resolutions. For ease of generating those PNGs I design icons as SVG and then export to the various sizes using Inkscape which is free and cross-platform. It's got some nice features for designing icons, including the Icon Preview view (see below), and it generates nice crisp PNGs.

enter image description here


For Android older than Lollipop, your best practice for SVG on Android is going to be to use a tool to convert your SVG to PNG at the size(s) you're interested in. Existing SVG support for Android is not comprehensive of what you're likely to find in an SVG file, and even if it were, the support is not built into the OS so using them directly for icons is definitely out.

Beginning with Lollipop (API 21) see What are best practices for using SVG icons on Android?. Thanks to @MarkWhitaker @AustynMahoney for pointing this out.


This is what we are using to transform a SVG file into multiple resolutions. For example, to generate the launch icon: svg2png -w48 icon.svg

#!/bin/bash -e# Transforms a SVG into a PNG for each platform# Sizes extracted from# http://developer.android.com/design/style/iconography.html[ -z $2 ] && echo -e "ERROR: filename and one dimension (-w or -h) is required, for example:\nsvg2png -w48 icon.svg\n" && exit 1;FILENAME=$2DEST_FILENAME=`echo $2 | sed s/\.svg/\.png/`FLAG=`echo $1 | cut -c1-2`ORIGINAL_VALUE=`echo $1 | cut -c3-`if [ "$FLAG" != "-w" ] && [ "$FLAG" != "-h" ]; then    echo "Unknown parameter: $FLAG"     exit 1fi# PARAMETERS: {multiplier} {destination folder}function export {  VALUE=$(echo "scale=0; $ORIGINAL_VALUE*$1" | bc -l)  CMD="inkscape $FLAG$VALUE --export-background-opacity=0 --export-png=src/main/res/$2/$DEST_FILENAME src/main/svg/$FILENAME > /dev/null"  echo $CMD  eval $CMD} export 1 drawable-mdpiexport 1.5 drawable-hdpiexport 2 drawable-xhdpiexport 3 drawable-xxhdpiexport 4 drawable-xxxhdpi