Почему не отображается svg в chrome?

Question

[Aljo]

Здравствуйте!

Экспортировал svg с Фигмы и вставил на сайт вот так:
<img src="images/ig-logo.svg" alt="">

Но на сайте пустое место, хотя при загрузке в админке он отображался. В Мозилле svg отображается.

Как подсказывали в интернете сделал в svg xlink:href="data:image/png;base64 - не помогло

Comments

[Антон Литвиненко]

Как вам подсказали в интернете вы из свг сделали обычную картинку в пнг. Если там был сразу такой код, то это не свг. Проверяйте, задали ли вы размеры картинке

[Aljo]

Антон Литвиненко, да, размеры заданы. Странный момент, просто если я открою svg-файл с папки, то он без проблем отображается в хроме. А при вставке на сайт там пусто. Либо я не понимаю как правильно экспортировать с фигмы

[Aljo]

Антон Литвиненко, на сайте есть другие svg и они открываются нормально, при клике на ссылку в коде, а экспортированные с фигмы открываются как пустой xml. Разница между ними в том, что те, которые открываются - сделаны через path, а с фигмы - имеют теги rec, defs, pattern, use

[ProjectSoft]

просто если я открою svg-файл с папки,

С браузера копировали путь для вставки в src? Что на выходе?
CSS свойства для img и его родителей проверяли? Не используется ли flex, а если используется, то правильно ли?

Трюков может быть сколько угодно. На пациента бы посмотреть.

[Aljo]

ProjectSoft, да, ответ в комменте выше - открываются как пустой xml. Нет, не флекс. Ширина и высота для img заданы

[ProjectSoft]

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

[Aljo]

ProjectSoft, вот файл
p.s. он даже в Фотошопе пустым открывается. Странный экспорт с фигмы

[ProjectSoft]

Aljo, это даже не svg от слова "совсем".

Ваш файл

Обычная картинка. Вы могли бы просто дешифровать base64 в png и смело использовали бы на своей странице. Грубо говоря, данный файл не является векторным файлом.

Проверил вашу проблему у себя на Chrome. Проблем никаких нет. Проблемы у вас могут быть из-за различных расширений и т. д. ...

Скрин Chrome

[Aljo]

ProjectSoft,

Вы могли бы просто дешифровать base64 в png и смело использовали бы на своей странице.

Я не знаю что это и как это)

Проверил вашу проблему у себя на Chrome. Проблем никаких нет. Проблемы у вас могут быть из-за различных расширений и т. д. ...

Видимо так и есть, спасибо за помощь

[ProjectSoft]

Aljo,

Я не знаю что это и как это)

Notepad++ вам в помощь.
Из кода SVG файла берёте код, который после data:image/png;base64, и копируете его в новый документ, выделяете всё в нём. А дальше Меню Плагины ->MIME Tools -> Base64 Decode и сохраняете в PNG.

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

[Aljo]

ProjectSoft, да в фигме стоит фоном png-картинка. Просто интересно то, что если в фигме увеличивать масштаб, то она не теряет качество как svg. Видимо это из-за большого размера исходника. Спасибо вам еще раз, продублируйте свой коммент в ответы - я отмечу его решением

[Aljo]

ProjectSoft, извиняюсь, не подскажете - заметил, что на сайте нормально отображается только svg с именем logo, если даже самому файлу логотипа задать другое имя, то оно тоже перестанет отображаться. С чем это свянано?

[Danny Arty]

Aljo, через админку грузите картинки? Если да, то 100% какой-то плагин для картинок ломает. Попробуйте загрузить через ftp ваши svg картинки

[Aljo]

Danny Arty, спасибо) получилось

[ProjectSoft]

Aljo,

на сайте нормально отображается только svg с именем logo, если даже самому файлу логотипа задать другое имя, то оно тоже перестанет отображаться. С чем это свянано?

Самый первый зачинщик сего поведения - AdBlock (защита от рекламы, блокировщик)
Ну и комментарий Danny Arty тоже в тему.