Как правильно вывести SVG иконку из внешнего файла?

Question

[Stanislav6]

Здравствуйте! Не выводится иконка через <use>. Полагаю, загвоздка с путями до файла, но я не осилил, к сожалению. Помогите разобраться.

Путь до файла спрайта:
папка сайта/assets/img/icons-sprite.svg

Внутри спрайта:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <symbol id="bag" viewBox="0 0 24 24"><g data-name="Слой 2"><g data-name="Слой 1"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.17 6h-2.88A5.5 5.5 0 006.71 6H3.83a.89.89 0 00-.88.83l-.89 14.23a.89.89 0 00.88.94h18.12a.89.89 0 00.88-.94l-.89-14.23a.89.89 0 00-.88-.83zM12 3a4.51 4.51 0 014.24 3H7.76A4.51 4.51 0 0112 3zM3.06 21l.88-14h16.12l.88 14z"/></g></g></symbol>
</svg>

Вывожу:

<svg>
  <use xlink:href="assets/img/icons-sprite.svg#bag"></use>
</svg>

и пустота. В инспекторе, внутри use #shadow-root (closed)

Comments

[Ankhena]

Как файл открываете? Нужен сервер, хотя бы локалхост. А для ИЕ и полифил.

[Stanislav6]

Ankhena, ну, файл на хостинге лежит.

[Softlink]

1. Если svg лежит в том же домене, то проверить на наличие ошибки 404 в консоли. Если имеется, то маневрировать с путями. Тут вам видней, где и что у вас находится.

2. Если вы тестируете сайт локально, без сервера, то вставка свг через use работать не будет, для этого нужен http.

3. Если свг лежит на другом домене, то надо использовать альтернативные способы подключения спрайта.

[Ankhena]

Stanislav6,
Вот с такой шапкой точно работает

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Возможно, доктайп избыточен. Сейчас с телефона - не проверить.