Еще один способ вставить SVG файл на сайт (use xlink:href=)

21.09.2021

Основная идея метода в том, что сначала мы добавляем на страницу svg файл через тег с display: none;, а затем вызываем его через use xlink:href - где и сколько угодно раз.

 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
    <symbol viewBox="0 0 34 20" id="common__arrow" xmlns="http://www.w3.org/2000/svg"><path class="adst0" d="M.2 9.4H32v1.2H.2z"></path><path d="M22.52.962l.849-.849 9.9 9.9-.85.848z"></path><path d="M22.52 19.013l9.9-9.9.848.849-9.9 9.9z"></path></symbol>
</svg>

<svg class="hce-icon">
    <use xlink:href="#common__arrow"></use>
</svg>

Живой пример:


Категории: Web, HTML
Яндекс.Метрика