Почему не отображаются SVG иконки при вставке их через xlink:href?

Question

[Alter Ego]

Пытаюсь обуздать вставку SVG иконок на страницу. Для вставки использую следующий способ:

<svg>
    <use xlink:href="/icons.svg#icon-list"></use>
</svg>

То есть, я пытаюсь отобразить иконку сразу из /icons.svg, чтобы не вставлять код всего svg файла внутрь html страницы (так же как реализованы иконки и на toster.ru). Но такой способ у меня не работает, а если я вставляю содержимое svg файла на страницу, иконка отображается. Подскажите, в чем может быть причина? Или я что-то упустил?

Сам тестовый svg:

<svg>
    <defs>
        <symbol id="icon-list" viewBox="0 0 24 24">
            <path d="M3,13h2v-2H3V13z M3,17h2v-2H3V17z M3,9h2V7H3V9z M7,13h14v-2H7V13z M7,17h14v-2H7V17z M7,7v2h14V7H7z"></path>
        </symbol>
        <symbol id="icon-laptop" viewBox="0 0 24 24">
            <path d="M20,18c1.1,0,2-0.9,2-2l0-10c0-1.1-0.9-2-2-2H4C2.9,4,2,4.9,2,6v10c0,1.1,0.9,2,2,2H0v2h24v-2H20z M4,6h16v10H4V6z"></path>
        </symbol>
    </defs>
</svg>

Answer 1

[Alter Ego]

Заметил, что при копировании OuterHTML в хроме, кроме пути к svg файлу так же добавляется xmlns:xlink="www.w3.org/1999/xlink". Потом глянул в svg файл этого сайта и скопировал оттуда в тег svg следующие атрибуты:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">...</svg>

заработало

Answer 2

[Петр]

Данный подход у вас не будет работать в IE 10 и IE 11, и в других бывают проблемы.
Вставляйте svg инлайн.

Comments

[Alter Ego]

А как сделано на этом сайте?

[Петр]

qwax: Так и посмотрите как ))) В IE11 через inline, а в chrome через tag

[Alter Ego]

ну дак поэтому у меня и вопрос) вот я сижу через хром, просматриваю как тут вставлены иконки и вижу следующую картину:
< use xlink:href="https://toster.ru/images/sprite_0.1.svg#icon_menu_feed" > use >
Вопрос: почему тут срабатывает вставка иконки по абсолютной ссылке, а в моем случае нет? я недоумеваю :\