Unsupported SVG Features in Android VectorDrawables

Android’s VectorDrawable format provides a lightweight way to render vector graphics across different screen densities, but it only supports a subset of the full Scalable Vector Graphics (SVG) specification. When converting SVGs into VectorDrawable XML files using Android Studio’s Vector Asset Studio or third-party converters, several advanced tags, styling rules, and visual effects are ignored, stripped, or cause import errors. This guide outlines the SVG elements and attributes that are unsupported in Android VectorDrawables and how to adjust your assets for compatibility.

Unsupported SVG Elements

VectorDrawables are primarily designed for simple icons and shapes rendered via path data. The following SVG elements are completely unsupported or severely restricted:

1. Text Elements

• <text>, <tspan>, <textPath>: Android VectorDrawables cannot parse font references or raw text nodes. All text must be converted to vector paths (outlines/curves) in a vector editor like Figma, Adobe Illustrator, or Inkscape prior to export.

2. Complex Structure and Reusability Tags

• <use>: Reusable component references are not natively parsed.
• <symbol>: Symbol definitions are ignored.
• nested <svg>: SVGs embedded within an existing SVG document are not supported.
• <foreignObject>: Embedding non-SVG elements (such as HTML fragments) is unsupported.

3. Filters and Visual Effects

• <filter> and <fe*> elements: Advanced raster and visual effects—such as <feGaussianBlur>, <feDropShadow>, <feBlend>, and <feColorMatrix>—are entirely unsupported. VectorDrawables do not support native drop shadows or blur effects.

4. Embedded Media and Patterns

• <image>: Embedded bitmap images (PNG, JPEG, WebP) within the SVG will not be converted.
• <pattern>: Repeating pattern fills are unsupported; fills must be solid colors or supported gradient types.

5. Masking and Advanced Clipping

• <mask>: Alpha masks and luminance masks are not supported. Only basic hard clipping via <clip-path> (mapped to <clip-path> in VectorDrawable) is supported.

6. Interactive and Dynamic Tags

• <script>: Embedded JavaScript or logic is ignored.
• <style>: Global CSS stylesheet blocks within the <defs> tag are often ignored or improperly parsed.
• <animate>, <animateTransform>, <set>: Declarative SVG animations are ignored. Vector animations in Android must be handled separately using AnimatedVectorDrawable.

Unsupported SVG Attributes and Styling

Even within supported elements (like <path>, <rect>, <circle>, or <g>), specific attributes and formatting methods cannot be directly translated into VectorDrawable properties.

1. CSS Styles and Selectors

• style="..." (Inline CSS): Inline CSS strings (e.g., style="fill:red;stroke-width:2") are not reliably parsed. Properties should be defined as direct XML attributes (e.g., fill="red" and stroke-width="2").
• Class Selectors (class="..."): CSS class-based styling rules defined in external or internal stylesheets are dropped.

2. Relative and Non-Standard Units

• Percentages (%), em, rem, pt, in, cm: VectorDrawables require absolute, unitless coordinates mapped directly to the defined viewportWidth and viewportHeight. Dimensions declared in percentages or typographical units inside path coordinates or shapes are invalid.

3. Gradient Configurations

• Mesh Gradients: Unsupported.
• Non-linear Spread Methods: spreadMethod="reflect" and spreadMethod="repeat" may fail to render correctly depending on the Android API level.
• Multi-stop Gradients: Gradients with complex or non-uniform color stops require Android 7.0 (API level 24) or higher and may fail to backport smoothly on older platforms.

4. Non-Uniform Transformations

• transform="matrix(...)": Complex transformation matrices on individual shape elements are often flattened or rejected. In VectorDrawable XML, transformations (rotation, scaling, translation) must be applied to an encapsulating <group> element rather than directly to a <path>.

Summary of Best Practices for Conversion

To ensure an SVG converts seamlessly to an Android VectorDrawable:

1. Outline all text: Convert all typography to vector paths.
2. Flatten layers and remove styles: Expand all strokes where necessary, remove global <style> tags, and apply colors directly as element attributes.
3. Remove filters: Strip all blurs, drop shadows, and clipping masks before exporting.
4. Group transforms: Wrap paths in <g> tags if they require rotation, translation, or scaling.
5. Clean the SVG: Run the graphic through an optimizer such as SVGO to remove metadata, comments, and unsupported tags.