Почему некорректно отображается иконка?

Question

[leeroyjenkins176]

На пк все ок, иконка отображается с градиентом.
На ios нет градиента, сплошной синий цвет.
На андроид вообще ничего не отображается.
Если в fill задать просто цвет, то все ок. В чем заключается проблема?

Comments

[Ivan Ustûžanin]

на "эмуляторе" айфона и андроида с appetize.io пример на codepen отображается нормально

[leeroyjenkins176]

Ivan Ustûžanin, хм, действительно..
Тогда проблема в том, что svg у меня находится в файле. Это я для примера в codepen вынес его напрямую в html

[Ivan Ustûžanin]

leeroyjenkins176, внешние ресурсы всегда боль для svg
например, svg загруженный через <img> не может использовать внешние файлы, подключение через <use href=""> в инлайн svg не всегда умеет во внешние файлы и т.п.

[Ankhena]

Попробуйте засунуть градиент внутрь SVG.

Вместо символьного спрайта лучше использовать стек из svg. Он будет работать не только в use, но и в img и в любом виде в стилях.

[leeroyjenkins176]

Ankhena,

Попробуйте засунуть градиент внутрь SVG

Может вы имели ввиду внутрь HTML? Потому что сейчас он в svg.
Я поискал детальнее информацию о проблеме - похоже некоторые браузеры просто игнорируют градиенты внутри внешних svg файлов. Единственное решение - спрайт иконок оставлять в svg-файле а сами градиенты инлайнить в html.
Насчет стека - интересное решение. А можете посоветовать инструменты для их сборки? Для спрайтов сейчас использую icomoon. Есть что-то подобное для создание стека?

[Ankhena]

leeroyjenkins176,

Может вы имели ввиду внутрь HTML? Потому что сейчас он в svg.

Сейчас он мимо своей иконки.

А можете посоветовать инструменты для их сборки?

https://www.npmjs.com/package/gulp-stacksvg

[Александр Васильев]

xmlns из свг продублируй в symbol

Answer 1

[Александр Васильев]

при обычной вставке svg из спрайта достаточно конструкции с атрибутом в symbol

svg ...
   symbol xmlns="http://www.w3.org/2000/svg" ...

<svg>
  <use xlink:href="....sprite.svg#some_id"></use>
</svg>

Но с градиентом это не работает.
Мне помогает добавление этого атрибута еще и в svg
Вот пример рабочего в ios спрайта с градиентом:

spoiler

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" id="svg_social_tg">
    <g clip-path="url(#clip0_290_3677)">
      <path
        d="M40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40C31.0457 40 40 31.0457 40 20Z"
        fill="#419FD9"></path>
      <path
        d="M40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40C31.0457 40 40 31.0457 40 20Z"
        fill="url(#paint0_linear_290_3677)"></path>
      <path
        d="M8.9895 19.5584C14.8056 16.9712 18.6838 15.2656 20.6244 14.4414C26.1649 12.0885 27.3162 11.6797 28.0667 11.6661C28.2317 11.6633 28.6007 11.7051 28.8397 11.9031C29.0416 12.0703 29.0971 12.2962 29.1237 12.4547C29.1502 12.6133 29.1833 12.9745 29.157 13.2566C28.8567 16.4776 27.5577 24.2942 26.8967 27.9018C26.617 29.4283 26.0663 29.9401 25.5332 29.9902C24.3747 30.0991 23.4948 29.2085 22.3727 28.4574C20.6167 27.2822 19.6248 26.5506 17.9203 25.4038C15.9506 24.0785 17.2275 23.3501 18.3501 22.1596C18.6438 21.8481 23.7486 17.1072 23.8474 16.6772C23.8597 16.6234 23.8712 16.4229 23.7546 16.3171C23.6379 16.2112 23.4657 16.2474 23.3415 16.2761C23.1654 16.317 20.3602 18.2101 14.9261 21.9554C14.1298 22.5136 13.4087 22.7856 12.7625 22.7713C12.0502 22.7556 10.6799 22.3601 9.66125 22.0221C8.41183 21.6073 7.41878 21.3881 7.50525 20.6839C7.55029 20.3171 8.04502 19.9419 8.9895 19.5584Z"
        fill="white"></path>
    </g>
    <defs>
      <linearGradient id="paint0_linear_290_3677" x1="20" y1="0" x2="20" y2="39.7033" gradientUnits="userSpaceOnUse">
        <stop stop-color="#2AABEE"></stop>
        <stop offset="1" stop-color="#229ED9"></stop>
      </linearGradient>
      <clipPath id="clip0_290_3677">
        <rect width="40" height="40" fill="white"></rect>
      </clipPath>
    </defs>
  </symbol>
</svg>

Comments

[leeroyjenkins176]

У вас в коде два идентичных path. Один имеет заливку цветом, второй градиентом, у которого цвета практически не отличимы от первой заливки. Мне кажется, что на ios вы видите просто цвет #419FD9, но думаете что это градиент.
Вот в коде ниже я оставил только path с градиентом и поменял цвета для наглядности. У меня он не работает на ios, просто самолетик на черном фоне. Код естественно тестирую через внешний svg.
Поправьте, если я вас не так понял.

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg">
    <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" id="svg_social_tg">
        <path d="M40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40C31.0457 40 40 31.0457 40 20Z" fill="url(#paint0_linear_290_3677)">
        </path>
        <path d="M8.9895 19.5584C14.8056 16.9712 18.6838 15.2656 20.6244 14.4414C26.1649 12.0885 27.3162 11.6797 28.0667 11.6661C28.2317 11.6633 28.6007 11.7051 28.8397 11.9031C29.0416 12.0703 29.0971 12.2962 29.1237 12.4547C29.1502 12.6133 29.1833 12.9745 29.157 13.2566C28.8567 16.4776 27.5577 24.2942 26.8967 27.9018C26.617 29.4283 26.0663 29.9401 25.5332 29.9902C24.3747 30.0991 23.4948 29.2085 22.3727 28.4574C20.6167 27.2822 19.6248 26.5506 17.9203 25.4038C15.9506 24.0785 17.2275 23.3501 18.3501 22.1596C18.6438 21.8481 23.7486 17.1072 23.8474 16.6772C23.8597 16.6234 23.8712 16.4229 23.7546 16.3171C23.6379 16.2112 23.4657 16.2474 23.3415 16.2761C23.1654 16.317 20.3602 18.2101 14.9261 21.9554C14.1298 22.5136 13.4087 22.7856 12.7625 22.7713C12.0502 22.7556 10.6799 22.3601 9.66125 22.0221C8.41183 21.6073 7.41878 21.3881 7.50525 20.6839C7.55029 20.3171 8.04502 19.9419 8.9895 19.5584Z" fill="lime">
        </path>
        <defs>
            <linearGradient id="paint0_linear_290_3677" x1="20" y1="0" x2="20" y2="39.7033" gradientUnits="userSpaceOnUse">
                <stop stop-color="red"></stop>
                <stop offset="1" stop-color="#229ED9"></stop>
            </linearGradient>
        </defs>
    </symbol>
</svg>

[Александр Васильев]

leeroyjenkins176, да, что-то не то )) Это явно не решение вопроса