Создавать элементы SVG динамически с помощью JavaScript не так просто, как может показаться. В этой статье показано, как создать элемент SVG с помощью JS, который отображает <symbol> через элемент <use>.

Небольшое отступление

Вот пример того, как выглядит код SVG, использующий элемент USE (преимущественно применяется для SVG-спрайтов):

<svg>
    <use xlink:href="#icon-close"></use>
</svg>

В этой конструкции с помощью элемента USE мы ссылаемся на другой элемент SVG, находящийся извне:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="icon-close" viewBox="0 0 24 24">
        <path d="M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z"/>
    </symbol>
</svg>

Связь осуществляется за счёт значения атрибута xlink:href, равному id элемента symbol, который принадлежит svg-спрайту. В нашем примере это простая иконка крестика.

Задача стоит следующая - как, имея готовый svg-спрайт, динамически создать svg c элементом use, ссылающимся на нужную часть спрайта. Вариант - просто скопировать эти 3 строки и вставить в код - не годится (

Создание с помощью JavaScript

Когда вы знаете, ЧТО именно необходимо создать, понимание задачи становится легче. Вот готовое решение:

var svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
	useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');

useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon-close');

svgElem.appendChild(useElem);

Важно знать, что вы должны использовать именно document.createElementNS для создания элементов svg и use. Подобное не сработает с document.createElement. Аналогично, метод setAttributeNS должен использоваться для атрибута xlink: href вместо setAttribute. Естественно, стоит быть внимательным с указанием корректных параметров.

После запуска этого кода, переменная svgElem содержит элемент SVG, который можно использовать на сайте.