Как использовать этот код в sprite.svg

<svg width="31" height="68" viewBox="0 0 31 68" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M11.3521 4.72852H13.4338V13.0555H11.3521V4.72852Z" fill="url(#paint0_linear)" />
    <path d="M17.5972 4.72852H19.6789V13.0555H17.5972V4.72852Z" fill="url(#paint1_linear)" />
    <path
        d="M25.9244 15.1372V0.564941H5.10687V15.1372H0.943359V67.1811H30.0879V15.1372H25.9244ZM7.18862 2.6467H23.8427V15.1372H7.18862V2.6467ZM28.0062 65.0993H3.02511V17.219H28.0062V65.0993Z"
        fill="url(#paint2_linear)" />
    <path
        d="M7.18823 42.0085V48.0906L14.4744 51.2133V54.8823C13.0406 55.389 12.1802 56.8553 12.4373 58.3541C12.6945 59.8534 13.9946 60.9486 15.5153 60.9486C17.0359 60.9486 18.336 59.8534 18.5932 58.3541C18.8503 56.8553 17.9899 55.389 16.5561 54.8823V47.3379L23.8423 40.5722V35.9549H25.924V29.7096H19.6788V35.9549H21.7605V39.6635L16.5561 44.4974V25.2859L18.5932 27.3229L20.065 25.851L15.5153 21.3013L10.9655 25.851L12.4373 27.3229L14.4744 25.2859V48.9491L9.26999 46.7184V42.0085C10.7037 41.5018 11.5642 40.0355 11.307 38.5367C11.0498 37.0374 9.74977 35.9422 8.22911 35.9422C6.70845 35.9422 5.40837 37.0374 5.1512 38.5367C4.89404 40.0355 5.75449 41.5018 7.18823 42.0085ZM21.7605 31.7914H23.8423V33.8731H21.7605V31.7914ZM15.5153 56.7724C16.0901 56.7724 16.5561 57.2385 16.5561 57.8133C16.5561 58.3881 16.0901 58.8542 15.5153 58.8542C14.9404 58.8542 14.4744 58.3881 14.4744 57.8133C14.4744 57.2385 14.9404 56.7724 15.5153 56.7724ZM8.22911 38.0366C8.80393 38.0366 9.26999 38.5027 9.26999 39.0775C9.26999 39.6523 8.80393 40.1184 8.22911 40.1184C7.65429 40.1184 7.18823 39.6523 7.18823 39.0775C7.18823 38.5027 7.65429 38.0366 8.22911 38.0366Z"
        fill="url(#paint3_linear)" />
    <defs>
        <linearGradient id="paint0_linear" x1="11.5648" y1="4.72851" x2="13.3698" y2="4.76215"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#C89AFC" />
            <stop offset="1" stop-color="#7C6AFA" />
        </linearGradient>
        <linearGradient id="paint1_linear" x1="17.8099" y1="4.72851" x2="19.6149" y2="4.76215"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#C89AFC" />
            <stop offset="1" stop-color="#7C6AFA" />
        </linearGradient>
        <linearGradient id="paint2_linear" x1="3.92222" y1="0.564934" x2="29.1741" y2="1.3884"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#C89AFC" />
            <stop offset="1" stop-color="#7C6AFA" />
        </linearGradient>
        <linearGradient id="paint3_linear" x1="7.23377" y1="21.3013" x2="25.2628" y2="22.0069"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#C89AFC" />
            <stop offset="1" stop-color="#7C6AFA" />
        </linearGradient>
    </defs>
</svg>

Пробовал сам. Ничего не получилось.


Ответы (1 шт):

Автор решения: kalaganov5

На октябрь 2021 внешний SVG файл поддерживаться во всех браузерах, кроме иконок с градиентом как у Вас.

Chrome оставит иконку прозрачной, а safari её закрасит черным.

Чуть подробнее тут

→ Ссылка