Angular 7.3.5 — в Microsoft Edge не отображаются SVG, а без ангуляра отображаются, в чём проблема?

Question

[Нерон Лордов]

SVG подключен через тэг object

<object type="image/svg+xml" data="assets/sample-icon.svg"></object>

Live example https://stackblitz.com/edit/angular-jvgtwl

В других браузерах всё ок - и в случае с ангуляром, и без него (чистый html+css). Так же, чистый html+css корректно отображает подлинкованный svg и в еже, а вот если использовать тот же код в ангуляре - ёж не отображает svg, а другие браузеры отображают.

Как пофиксить? Как сделать так, чтобы подлинкованные Svg отображались в браузере Edge при использовании Angular? Спасибо!

Comments

[sim3x]

Почему не в img?

[Нерон Лордов]

sim3x, попробовал через img - всё равно не отображается

[sim3x]

Нерон Лордов, лучше сделать страницу с примером

[Нерон Лордов]

sim3x, https://drive.google.com/file/d/1QLaUTvj0Y4O2qNEU1...

[sim3x]

Нерон Лордов,
github, gist, jsfiddle, etc

[Нерон Лордов]

sim3x, вот например: https://stackblitz.com/edit/angular-jvgtwl

причём в edge вообще нихрена не работает, хотя код в редакторе сохранен

Answer 1

[monochromer]

Проблема в каких-то полифиллах и к svg это не относится никоим образом. Раскомментил все в файле polyfills.ts и получил:

Comments

[Нерон Лордов]

Вы, сэр, - волшебник!

[Нерон Лордов]

Бонус-вопрос - а как ты вообще до этого додумался? Я сколько ни гуглил - не смог найти решение.

[Нерон Лордов]

и кстати насколько утяжеляется проект от подключения всех этих штук в полифилах? Насколько увеличится время загрузки страниц и уменьшится производительность приложения?

[Нерон Лордов]

И еще вопрос: а ты не выяснил случайно, какой конкретно элемент отвечает за корректное отображение? В этом polyfills.ts. Хотелось бы включить только один элемент, а не все, думаю так будет лучше)

[Нерон Лордов]

И еще вопрос! А что это за браузер на первом скриншоте, на котором все иконки красные? И почему, интересно, они сплошь красные, а не разноцветные (как должны быть)?

[monochromer]

Нерон Лордов, браузер на первом скриншоте - IE11 (Window 7). Он не поддерживает фильтры, поэтому все иконки одноцветные. Причину нашел достаточно быстро - показывалась ошибка даже самим angular'ом прямо в браузере. За что отвечает конкретный полифилл и какому браузеру он нужен, написано прямо в самом файле в комментариях. Например, IE11 нужны почти все полифиллы (но это для работы самого angular). Способы разбиения кода и его подгрузки уже отдельная история.

Вообще странная идея использовать иконки таким способом- вставлять через img, object, emdedd, а потом менять цвет фильтрами. Лучше использовать inline svg - самый гибкий способ для стилизации иконок.