Chrome 84 начали пропадать SVG иконки

Question

После обновления Chrome до 84.0.4147.89 на сайтах начали пропадать svg-иконки размеченные с помощью тега use. Что более удивительно – не все и после обновления они возвращаются.

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

Есть какая-нибудь информация по этой проблеме?

google chrome html

Иван Антонов · Answer

Самое простое решение для меня стало подключение SVG-спрайтов в тело документа.

Было

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

Стало

<svg><use xlink:href="#pencil"></use></svg>
<svg><use xlink:href="#delete"></use></svg>
<div style="display:none">
    <svg>
        <symbol id="pencil">...</symbol>
        <symbol id="delete">...</symbol>
    </svg>
</div>

Минусы:

Увеличение DOM,
SVG-спрайт больше не кешируется и загружается при каждой загрузке страницы,
Нужно контролировать id. Потому что если на странице появится второй элемент с одинаковым id, может что-то сломаться в JS или не будет работать иконка.

Плюсы:

Не создает лишних запросов,
Фиксит проблему 84 хрома.

Chrome 84 начали пропадать SVG иконки

One Answer

Add your own answers!

Ask a Question