AndroidStudio import SVG with ERROR@ <mask> is not supported

Question

I got message "ERROR@ <mask> is not supported" when try to import SVG using

 Android Studio 3.0.1
Build #AI-171.4443003, built on November 10, 2017
JRE: 1.8.0_152-release-915-b08 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.6

Anyway to import SVG and make them show correctly?

Answer 1

Tool 1) is ShapeShifter https://shapeshifter.design

Tool 2) is https://svg2vector.com

Try this tool https://svg2vector.com on this case. When using Android Vector Asset Studio, you may encounter these errors:

Missing "viewBox" in <svg> element
<animate> is not supported
<animateColor> is not supported
<animateMotion> is not supported
<animateTransform> is not supported
<mpath> is not supported
<set> is not supported
<a> is not supported
<defs> is not supported
<glyph> is not supported
<marker> is not supported
<mask> is not supported
<missing-glyph> is not supported
<pattern> is not supported
<switch> is not supported
<symbol> is not supported
<feBlend> is not supported
<feColorMatrix> is not supported
<feComponentTransfer> is not supported
<feComposite> is not supported
<feConvolveMatrix> is not supported
<feDiffuseLighting> is not supported
<feDisplacementMap> is not supported
<feFlood> is not supported
<feFuncA> is not supported
<feFuncB> is not supported
<feFuncG> is not supported
<feFuncR> is not supported
<feGaussianBlur> is not supported
<feImage> is not supported
<feMerge> is not supported
<feMergeNode> is not supported
<feMorphology> is not supported
<feOffset> is not supported
<feSpecularLighting> is not supported
<feTile> is not supported
<feTurbulence> is not supported
<font> is not supported
<font-face> is not supported
<font-face-format> is not supported
<font-face-name> is not supported
<font-face-src> is not supported
<font-face-uri> is not supported
<hkern> is not supported
<vkern> is not supported
<linearGradient> is not supported
<radialGradient> is not supported
<stop> is not supported
<ellipse> is not supported
<polyline> is not supported
<text> is not supported
<use> is not supported
<feDistantLight> is not supported
<fePointLight> is not supported
<feSpotLight> is not supported
<altGlyph> is not supported
<altGlyphDef> is not supported
<altGlyphItem> is not supported
<glyphRef> is not supported
<textPath> is not supported
<tref> is not supported
<tspan> is not supported
<clipPath> is not supported
<color-profile> is not supported
<cursor> is not supported
<filter> is not supported
<foreignObject> is not supported
<script> is not supported
<view> is not supported

Answer 2

1. Open the SVG file and remove the mask element. You can keep the use element.
2. Import
3. Open imported file
4. Remove the last element that hasfillType="evenOdd"
5. Update the color on the android:fillType="nonZero" element

This depends of course on how the designer exports the asset but editing paths like this will most always get you where you want.

Answer 3

In my case this was the result of a symbol override in Sketch which is a known technique which enables you to easily change a symbol's color. It requires you to use a (color) symbol inside a symbol (nested symbols) as a mask. This is the mask that was causing issues.

My solution was simply to create an export version of the original symbol where I delete the mask.

Answer 4

Solution 1

Flattern image in Sketch and use this site to convert SVG to xml for Android

Solution 2

I use nonZero instead of evenOdd and open it in Sketch to reverse Order after reverse it will change pathData and remove android:fillType and everything work fine on Android 21+.

Solution 3

PNG

TLDR

After some research I found that there are two fill-rule property methods for Vector graphics, SVGs, the “evenodd” vs “nonzero”

I opened the SVG icon in Sketch and inspected the hole at the top of the icon. As expected it uses fill-rule:evenodd property. Now I have to change the fill-rule to use “nonzero” property. How? Select the path. In the right side, there is a settings icon at the “Fills” property. Click it and choose “non-zero”.

From the main menu, choose Layer → Paths → Reverse Order. I got the hole back at the top of the icon and got the hole in the app, too.

For more detail

Answer 5

If all you have is the .svg file, you can manipulate the .svg markup by hand to remove the mask and apply a fill inline.

If you're working with a designer, you can ask them to take the icon and remove whatever is inside the mask and apply a fill to the icon instead. Then have the designer export the .svg file and retry the import into Android Studio.

When the asset you're trying to import is exported from a designer software like Sketch or other, AND the icon is a mask (as opposed to a fill) it will export with that tag. Android Studio only accepts .svg's with fills (this is not a problem with iOS)