SVG icon showing cutoff on android in react native

Question

I am using lib react-native-svg to display SVG in my mobile app. In iOS, it is showing properly but on android, it shows cutoff. I will also attach a screenshot for reference, Can someone please help me how to solve this problem?

iOS Screenshot

iOS Screenshot

Android Screenshot

Andriod Screenshot

SVG snap

export const SVGIcon = (props: SvgProps) => (
    <Svg
        width={170}
        height={150}
        style={{ marginRight: 12, marginTop: 1 }}
        fill="none"
        viewbox="0 0 46 46"
        xmlns="http://www.w3.org/2000/svg"
        {...props}>
        <Mask
            id="a"
            style={{
                maskType: 'alpha',
            }}
            maskUnits="userSpaceOnUse"
            x={21}
            y={7}
            width={136}
            height={135}>
            <Rect
                x={21.25}
                y={7.25}
                width={135.5}
                height={134.5}
                rx={19.75}
                fill="#fff"
                stroke="#FAB405"
                strokeWidth={0.5}
            />
        </Mask>
        <G mask="url(#a)">
            <Path d="M129.103 84.136h-84.34v31.103h84.34V84.136Z" fill="#3E3E3E" />
            <Path
                d="M105.994 130.267c9.806 0 17.756-7.957 17.756-17.773 0-9.815-7.95-17.772-17.756-17.772-9.806 0-17.755 7.957-17.755 17.772 0 9.816 7.95 17.773 17.755 17.773Z"
                fill="#111"
            />
            <Path
                d="M105.994 122.295c5.408 0 9.792-4.388 9.792-9.801s-4.384-9.801-9.792-9.801c-5.407 0-9.791 4.388-9.791 9.801s4.384 9.801 9.791 9.801Z"
                fill="#F1F1F1"
            />
            <Path
                d="M105.994 120.727c4.543 0 8.225-3.686 8.225-8.233 0-4.547-3.682-8.233-8.225-8.233-4.542 0-8.225 3.686-8.225 8.233 0 4.547 3.683 8.233 8.225 8.233Z"
                fill="#BCBCBC"
            />
            <Path
                d="m-33.047 96.682 2.61 21.693H84.845s-1.305-21.301 13.84-26.398c15.144-5.096 30.68 5.358 28.46 25.614l16.189-.392s1.958.261 1.567-3.136c-.392-3.398 0-14.245 0-14.245l-1.567-1.96-1.828-20.648s-.652-3.397-8.616-5.75c-7.964-2.352-36.817-8.494-36.817-8.494s-2.611-1.046-3.394-2.222c-.784-1.176-15.798-26.267-15.798-26.267s-3.002-1.96-4.177-2.744c0 0-6.92-15.943-31.464-22.477C16.694 2.722-13.203.239-13.203.239h-4.047v93.045h-14.883l-.914 3.398Z"
                fill="#F5A81F"
            />
            <Path
                d="M-33.047 96.682h84.73l4.178 6.534h30.811v18.034h-119.72l-3.133-24.568h3.134Z"
                fill="#3E3E3E"
            />
            <Mask
                id="b"
                style={{
                    maskType: 'alpha',
                }}
                maskUnits="userSpaceOnUse"
                x={-33}
                y={-1}
                width={179}
                height={120}>
                <Path
                    d="m-32.917 96.42 2.611 21.694h115.28s-1.305-21.302 13.84-26.398c15.144-5.097 30.68 5.358 28.461 25.614l16.189-.392s1.958.261 1.566-3.137c-.391-3.398 0-14.244 0-14.244l-1.566-1.96-1.828-20.648s-.653-3.398-8.617-5.75-36.816-8.494-36.816-8.494-2.611-1.046-3.395-2.222c-.783-1.176-15.797-26.267-15.797-26.267s-3.003-1.96-4.178-2.744c0 0-6.92-15.944-31.464-22.478C16.825 2.46-13.072-.023-13.072-.023h-4.047v93.046h-14.884l-.914 3.398Z"
                    fill="#F5A81F"
                />
            </Mask>
            <G mask="url(#b)">
                <Path
                    d="M144.769 103.216s-3.655-15.682-22.977-18.426c-19.323-2.745-30.681-.262-41.778 18.426l-2.35 14.636 69.325-1.045-2.22-13.591Z"
                    fill="#FFC533"
                />
            </G>
            <Path
                d="M52.858 35h17.756L86.28 61.136 78.84 72.898h-25.98V35Z"
                fill="#DEDEDC"
            />
            <Path
                d="M22.047 9.517v83.636"
                stroke="#FFC533"
                strokeWidth={0.25}
                strokeMiterlimit={10}
            />
            <Path
                d="M22.047 101.909v12.807"
                stroke="#1E1E1E"
                strokeWidth={0.25}
                strokeMiterlimit={10}
            />
            <Path
                d="M78.055 93.153H-12.81"
                stroke="#FFC533"
                strokeWidth={0.25}
                strokeMiterlimit={10}
            />
            <Path d="M78.055 112.494H-34.614v5.228h112.67v-5.228Z" fill="#111" />
            <Mask
                id="c"
                style={{
                    maskType: 'alpha',
                }}
                maskUnits="userSpaceOnUse"
                x={46}
                y={24}
                width={41}
                height={50}>
                <Path
                    d="m50.639 73.16-3.917-46.393.653-1.96 32.639 3.267 6.528 33.324-7.834 11.761h-28.07Z"
                    fill="#C4C4C4"
                />
            </Mask>
            <G mask="url(#c)">
                <Path
                    d="m55.73 49.767 4.831 3.006c.783-.915 1.306-2.091 1.697-3.006 0-.13.13-.261.13-.523.393-.914.523-1.83.784-2.483 0-.13 0-.261.13-.261.131-.523-2.61-1.568-4.177-2.222-.522-.261-.914-.392-1.044-.522 0 0 .26.653.26 1.045 0 1.046-.26 1.83-.783 2.483-1.044 1.699-1.828 2.483-1.828 2.483Z"
                    fill="#FFAE73"
                />
                <Path
                    d="M57.95 44.932s1.697 4.051 4.439 4.835c0-.13.13-.261.13-.523.392-.914.523-1.83.784-2.483-.392-.522-2.742-1.437-4.178-2.09-.783.13-1.175.26-1.175.26Z"
                    fill="#F9924F"
                />
                <Path
                    d="M63.694 47.415s-6.136 1.83-7.18-2.091c-1.045-3.92-2.611-6.273 1.305-7.58 3.917-1.306 5.092 0 5.745 1.176 1.828 3.137.914 6.012.13 8.495Z"
                    fill="#FFAE73"
                />
                <Path
                    d="M64.87 58.784s8.616 9.279 15.797 11.108c0 0 2.22 0 2.61-2.875.262-1.83-14.1-14.767-18.538-14.898-4.308-.13-1.175 4.705.13 6.665Z"
                    fill="#427C4D"
                />
                <Path
                    d="M57.558 84.006c.523 1.437 1.436 2.483 2.611 2.875 1.306.522 3.134.522 5.092 0 2.35-.523 4.7-1.569 6.658-2.483 1.045-.523 1.959-1.176 2.48-1.568 2.743-2.222-7.18-4.836-5.613-12.546 3.133-15.551-3.133-17.25-4.308-18.818-2.22-2.744-8.747-.392-8.747-.392-1.175 1.699-2.09 3.92-2.35 7.318-.131 1.307 0 3.136.391 5.227.914 6.273 3.003 14.375 3.134 16.335 0 1.569.26 2.876.652 4.052Z"
                    fill="#759F7E"
                />
                <Path
                    d="M55.992 47.938s-.523 2.874-.261 3.267c0 0 6.136-.654 9.008.522 0 0-1.306-2.352-2.48-2.875-1.045-.392-6.267-.914-6.267-.914ZM54.817 62.051c6.92 6.142 14.491-4.966 14.491-4.966-.653-1.045-1.697-1.83-3.003-2.352-3.263 1.568-7.31 4.313-8.486 4.705-.652.13-2.48 2.09-3.002 2.613Z"
                    fill="#427C4D"
                />
                <Path
                    d="M55.861 52.12s-3.003 8.886-4.57-2.222c-.13-1.307 1.045-6.142.784-8.103-.261-2.09-1.567-3.79.783-5.358 2.22-1.568 2.22-2.221 3.656-2.613 1.436-.392 3.655.523 4.83.13 1.175-.392 5.484 4.313 3.134 5.75 0 0-2.48-2.613-3.525-.522-.392.784-1.828.261-1.567 1.176 1.567 7.58-2.089 11.761-3.525 11.761Z"
                    fill="#282828"
                />
                <Path
                    d="M55.992 63.358s11.75-4.574 17.755-9.017c0 0 .914-2.222-.392-3.529-1.305-1.176-15.536.654-18.408 4.052-2.872 3.397-1.436 8.363 1.045 8.494Z"
                    fill="#759F7E"
                />
                <Path
                    d="M73.356 36.699s.913-1.046.391-1.568c-.522-.523-1.175-1.7-.914-2.875.261-1.176 1.436-3.267 2.22-2.483.783.784.26 2.875.26 3.397 0 .523.523 1.046.393 1.96-.131.915-.653 1.96-.653 1.96l-1.697-.391Z"
                    fill="#FFAE73"
                />
                <Path
                    d="m73.094 35.392-3.786 15.16 4.44 3.789s1.305-3.92 2.088-9.54c.914-6.011 0-8.364 0-8.364s-1.567-2.744-2.742-1.045Z"
                    fill="#759F7E"
                />
            </G>
        </G>
    </Svg>
);

score 1 · Answer 1 · answered Aug 25 '22 at 05:52

Your SVG has a couple of problems. One is that the viewBox is the wrong size for your picture. It is a lot smaller than the SVG contents. But since the SVG mostly displays, I don't think that's your main problem.

Your SVG uses mask-type: alpha masks. It might be that that is the problem. Maybe they are not properly supported on Android. Or perhaps the parsing and rendering of masks is a bit broken in the Android version of react-native-svg.

Things to try:

Those two masks don't need to be type alpha masks. Remove the style="mask-type: alpha" from both masks, and the SVG will still look the same. Maybe they'll also render correctly then.
Try is modifying your SVG to not use masks. One mask just creates the rounded rectangle outline shape of the icon. That could be changed to a clip. The other mask just cuts out the bottom arch from the bus fender. You could remove the mask by modifying the fender shape, and colour.

Thank you for your answer but it is still the same. I am not able to resolve my problem — Jone, Aug 25 '22 at 17:58

SVG icon showing cutoff on android in react native

1 Answers1