Почему на некоторых устройствах отображается svg иконка, а на других нет (OpenCart)?

Question

[Lion97icvc]

Добрый день, развернули сайт на OpenCart, купили шаблон "Простор" и столкнулись с такой проблемой, что при проверке адаптивности сайта на Iphone 7 отображается svg иконка, а на Ipnone 12 и выше нет, при просмотре через DevTools так же отображается иконка. Подскажите, пожалуйста в какую сторону копать, чтоб решить проблему?

Comments

[Ivan Ustûžanin]

очень примитивно вангую: добавить в svg-файл иконки размер равный viewBox через атрибуты width и height

[Lion97icvc]

Ivan Ustûžanin, к сожалению это не помогло :

<symbol fill="none" width="18" height="18" viewBox="0 0 18 18" id="icon-nav-catalog" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="5.727" height="5.727" rx="1" stroke="currentColor" stroke-width="2"/>
<rect x="1" y="10.727" width="5.727" height="5.727" rx="1" stroke="currentColor" stroke-width="2"/>
<rect x="10.727" y="10.727" width="5.727" height="5.727" rx="1" stroke="currentColor" stroke-width="2"/>
<rect x="10.727" y="1" width="5.727" height="5.727" rx="1" stroke="currentColor" stroke-width="2"/>
</symbol>

На Андроидах тоже все ок показывает), только на яблоке не отображается(. Это кусочек кода из спрайта

[Ivan Ustûžanin]

Lion97icvc, width и height нужно добавлять на внешний svg, в котором этот спрайт используется, на спрайт бесполезно
ну или в том месте указать фиксированные размеры другими способами, яблочные устройства при отсутствии размеров в некоторых контекстах считают их за 0 и ничего не рисуют

[SHKD]

Потому что для устройств IOS иконки фавикона добавляются не в формате svg, а в формате png.

Рабочий пример:

<link rel="apple-touch-icon" sizes="180x180" href="https://yoursite.com/image/catalog/logotype/logo_180_180.png">
<link rel="apple-touch-icon" sizes="167x167" href="https://yoursite.com/image/catalog/logotype/logo_167_167.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://yoursite.com/image/catalog/logotype/logo_152_152.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://yoursite.com/image/catalog/logotype/logo_144_144.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://yoursite.com/image/catalog/logotype/logo_120_120.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://yoursite.com/image/catalog/logotype/logo_114_114.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://yoursite.com/image/catalog/logotype/logo_76_76.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://yoursite.com/image/catalog/logotype/logo_72_72.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://yoursite.com/image/catalog/logotype/logo_60_60.png">
<link rel="apple-touch-icon" sizes="57x57" href="https://yoursite.com/image/catalog/logotype/logo_57_57.png">