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?

Ethban

remove the mask elements and the mask attributes? – Writ

Answer 1

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

Ethban

where is the link for Solution 2? – Gormandize

I ask designer to Flattern image by using Sketch and sometimes its work – Ethban

Link is deprecated and takes you to studio tool instead so this is no longer the solution. – Windsor

Answer 2

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

Petiolate

What causes these errors in Android Studio? – Warford

Answer 3

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)

Desdee

Answer 4

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.

Clavichord

Almost, but the element was circular and ended up squared – Taboret

Answer 5

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.

Mueller