Подстава от Chrome 71

Дата: 24.12.2018 в 21:00, Категория: HTML
  • 387
  • 8
Подстава от Chrome 71

Недавно выяснилось, что Chrome обновился до 71 версии. Ничего сверхнового не вышло, в основном для разработчиков затронули изменения в DevTools.

Если вам интересно, можете узнать подробней тут или в видео ниже.

Это, конечно, всё хорошо, но именно из-за этой версии у многих пользователей на одном из моих проектов перестали работать SVG-спрайты. Самое интересное, что я две недели ничего не менял на этом сайте.

Как вы понимаете, на пустых областях должны были быть иконки. Позже оказалось, что это из-за обновления Chrome до 71 версии. Так как у меня была установлена 70 версия, все работало хорошо. В Safari, Firefox и Opera тоже всё работало нормально.

Почему в 71 версии не отображаются иконки, я так и не смог понять. В изменениях 71 версии ничего не говорится об SVG. На решение этого бага у меня ушло около 2 дней.

С помощью webpack'а я сохраняю все SVG и PNG иконки в отдельных файлах. Через PHP открываю файл /sprite.svg и вставляю во внутрь HTML сохранённый SVG-спрайт.

Как выяснилось, в 71 версии нельзя в значении атрибута xlink:href указывать идентификатор иконки без ссылки на сам SVG файл. Решение пришлось искать долго, но оказалось очень простым. Так как по адресу /sprite.svg у меня хранится спрайт с SVG иконками, то через React'овский компонент <Icon />, я вставляю иконкку с указанием ID иконки из спрайта.

Указав прямой путь к SVG-спрайту <use fill="xlink:href="/sprite.svg#plus-icon"></use>, все иконки снова заработали.

Тэги: