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?
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
mask element. You can keep the use element.fillType="evenOdd"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.
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)
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
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.
