AndroidStudio import SVG with ERROR@ <mask> is not supported
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
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
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)
- Open the SVG file and remove the
mask
element. You can keep theuse
element. - Import
- Open imported file
- Remove the last element that has
fillType="evenOdd"
- 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.