Convert SVG to Android VectorDrawable

Android Studio's Vector Asset Studio only imports a subset of SVG, so icons with filters, masks, or stray transforms either fail to import or render wrong as a VectorDrawable. This guide gets you a clean import: export a minified, paths-only SVG from Axialis IconVectors, run it through Vector Asset Studio to generate a VectorDrawable XML, and add PNG fallbacks only where a legacy target needs them.

What VectorDrawable does not support

Vector Asset Studio imports only a subset of SVG. Anything outside it is dropped, rasterized, or flagged with a warning, so remove or convert these before you export:

• Text elements: <text> is not supported. Convert type to outlines (filled paths) first.
• Filters and effects: blur, drop shadow, and other <filter> effects do not exist in VectorDrawable.
• Masks and SVG clip paths: <mask> and referenced clipPath are not imported. VectorDrawable has its own <clip-path> that takes raw path data.
• Patterns and embedded images: <pattern> and raster <image> are unsupported.
• Symbols and use references: <use> and <symbol> must be flattened into real paths.
• CSS styling: class-based <style> rules are ignored; put presentation attributes on each shape.
• Dashed strokes: stroke-dasharray is not supported; outline the stroke instead.
• Gradients: supported only when your minSdkVersion is high enough (gradient fills arrived in API 24, Android 7.0). On older minimums the import may warn or rasterize.
• Animation: a VectorDrawable is static. Motion belongs in a separate AnimatedVectorDrawable.

IconVectors export vs Android Studio import

The two tools split the work. IconVectors produces a clean, importable SVG; Vector Asset Studio turns it into the platform XML.

Prep your SVG for Android

1. Open or create your icon in IconVectors:
   • File → Open… (Ctrl+O) or New Icon (Ctrl+N).
   • Design on a square grid (e.g., 24×24) and keep shapes crisp at small sizes.

   

2. Flatten & simplify (as needed)
   • Remove filters/masks/clipping. Vector Asset Studio imports a subset of SVG.
   • If you used complex strokes (dashes, wide outlines), consider converting them to filled paths for predictable results.
   • Ensure the root has a clean viewBox (e.g., 0 0 24 24).
3. Export Minified SVG

   Choose File → Export → Export Minified (Shift+Ctrl+M) and save ic_check_24.svg. This strips metadata and preserves the geometry.

Import with Vector Asset Studio (Android Studio)

1. Open Vector Asset Studio
   • Resource Manager → + → Vector Asset, then pick Local file (SVG) and select your exported SVG.
   • Or use File → New → Vector Asset from the Project view.
2. Review the preview & name
   • Set a descriptive name (e.g., ic_check_24) and verify the tint/fill if you rely on a single color.
   • Fix warnings: simplify gradients, remove unsupported attributes, or re-export with strokes outlined.
3. Finish to generate a VectorDrawable

   Android Studio creates res/drawable/ic_check_24.xml. A minimal VectorDrawable looks like this:

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
       android:width="24dp"
       android:height="24dp"
       android:viewportWidth="24"
       android:viewportHeight="24">
     <path
         android:fillColor="#000"
         android:pathData="M4,12 L9,17 L20,6" 
         android:strokeColor="#000"
         android:strokeWidth="2" 
         android:fillAlpha="0" />
   </vector>

Use the drawable in layouts

• ImageView:

  <ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:src="@drawable/ic_check_24" />

• Tint with theme color (Material):

  <ImageView
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:src="@drawable/ic_check_24"
    android:tint="?attr/colorPrimary" />

Optional: PNG fallbacks

• If you support very old devices or specific toolchains, export small PNG sizes from the same SVG via File → Export → Export to Multiple Bitmaps (Shift+F3) and place them under density folders (e.g., mipmap- or drawable-).
• Keep the vector as the primary asset; use PNGs only where strictly required.

Adaptive launcher icons

App launcher icons on Android 8.0 (API 26) and up are adaptive: a foreground and a background layer that the launcher can mask into different shapes. A VectorDrawable works as either layer. Each layer is 108x108dp, and the outer edges are used for the mask and motion, so keep the key artwork within the central 66dp-diameter safe zone or it can be clipped. The same safe-zone idea drives web app icons; see PWA maskable icons for the browser equivalent.