AndroidStudio импортирует SVG с ERROR @ <mask> не поддерживается

Решение 1

Изображение Flattern в Эскиз и использование этот сайт для преобразования SVG в xml для Android

Решение 2

Я использую nonZero вместо evenOdd и открываю его в Sketch, чтобы отменить порядок, после того как он изменит pathData и удалит android: fillType, и все работает нормально на Android 21+.

Решение 3

PNG

TL; DR

После некоторого исследования я обнаружил, что существует два метода свойств правила заливки для векторной графики, SVG, «четное нечетное» и «ненулевое».

Я открыл значок SVG в Sketch и осмотрел отверстие в верхней части значка. Как и ожидалось, он использует свойство fill-rule: evenodd. Теперь мне нужно изменить правило заполнения, чтобы использовать свойство «ненулевое». Как? Выберите путь. Справа есть значок настроек у свойства «Заливки». Щелкните его и выберите «ненулевое».

В главном меню выберите Layer → Paths → Reverse Order. Я вернул отверстие в верхней части значка и получил отверстие в приложении.

Для более подробной информации

Если у вас есть только файл .svg, вы можете вручную манипулировать разметкой .svg, чтобы удалить маску и применить встроенную заливку.

Если вы работаете с дизайнером, вы можете попросить его взять значок и удалить все, что находится внутри маски, и вместо этого применить заливку к значку. Затем попросите дизайнера экспортировать файл .svg и повторить импорт в Android Studio.

Когда актив, который вы пытаетесь импортировать, экспортируется из дизайнерского программного обеспечения, такого как Sketch или другого, И значок является маской (в отличие от заливки), он будет экспортировать с этим тегом. Android Studio принимает только .svg с заливками (это не проблема iOS).

В моем случае это было результатом переопределения символа в Sketch, что является известной техникой, позволяющей легко изменять цвет символа. Это требует, чтобы вы использовали (цветной) символ внутри символа (вложенные символы) в качестве маски. Это маска, которая вызывала проблемы.

Мое решение заключалось в том, чтобы просто создать экспортную версию исходного символа, в которой я удаляю маску.

1. Откройте файл SVG и удалите элемент mask. Вы можете оставить элемент use.
2. Импортировать
3. Открыть импортированный файл
4. Удалите последний элемент, у которого есть fillType = "evenOdd"
5. Обновите цвет элемента android:fillType = "nonZero"

Это, конечно, зависит от того, как дизайнер экспортирует актив, но такие пути редактирования почти всегда приведут вас туда, куда вы хотите.

Инструмент 1) - ShapeShifter https://shapeshifter.design

Инструмент 2) - https://svg2vector.com

Попробуйте этот инструмент https://svg2vector.com в этом случае. При использовании Android Vector Asset Studio вы можете столкнуться со следующими ошибками:

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