Есть ли возможность динамически вставлять svg в html?

Question

[Luke LikeSkywalker]

Надо встраивать в html svg файл при выполнение условия switch. Вариант с тегом img с динамическими путями отпадает так же как и создание компонентов из svg. Последний вариант из-за того что мне надо будет импортировать около 20 компонентов-svg и только 1 из них будет встроен в DOM

Answer 1

[Владимир Проскурин]

Можно svg спрайты в отдельном блоке, а в vue подключать нужное изображение из спрайта через use.

Остальные иконки также помещаете в
<symbol id="unique_id"></symbol>
и вызываете в vue через

<svg version="1.1">
    <use href="#unqie_id" width="90" height="90"></use>
  </svg>

Comments

[Александр]

use не позволяет наследовать стили родителей, т.е. задавать fill или stroke обертке, наследуя через inherit свойство.

[Владимир Проскурин]

Александр, не правда https://jsfiddle.net/rcp14agb/ я там задал в родителя fill="red"

[Александр]

Владимир Проскурин, эко диво дивное. Почему был уверен, что это не работает?

[akiam]

Александр, можно ещё через
fill: currentColor;

[Александр]

akiam, хорошая попытка, но про это я знал

[Владимир Проскурин]

Александр,

Почему был уверен, что это не работает?

Возможно вы перепутали с object. А через use даже события отдельно привязывать можно к любому элементу внутри. Физически можно сказать, что он просто копирует в себя нужный фрагмент.