Как добавлять в разметку svg, чтобы он не загромождал разметку?

Question

[WebDev]

Чтобы иметь возможность изменять параметры svg картинки, эту картинку нужно вставить прямо в разметку, вместо подключения через img. Но свг файлы большие и сильно загромождают разметку. Как вы работаете с свг?

Answer 1

[Евгений Вольф]

Как вы работаете с свг?

Вариантов тут два:
1. Терпеть "как есть"
2. Вставлять файлы через какой-нибудь шаблонизатор или с помощью языка/интерпретатора, который с этими функциями справляется, например как-то так:

<?= file_get_content(__FILE__.'/img/svg/image1.svg'); ?>

*пример исключительно условный.

Answer 2

[Дмитрий Лузанов]

Вставляйте свг спрайт в место, где ничего не происходит в процессе разработки (шапка, например) (+ по примеру от Евгений Вольф этот файл можно подключать не прямиком в разметку), а в нужном месте делайте ссылку на нужный элемент свг спрайта.

<svg xmlns="http://www.w3.org/2000/svg"><use href="#СсылкаНаСвгЭлемент"/><svg>

Читать про use
Читать про svg спрайты

Answer 3

[AltaiR]

Если не нужно менять свойства иконки с помощью css то не обязательно весь код svg вставлять прямо в разметку. Собираешь svg-sprite с помощью gulp и просто в нужном месте в разметке вставляешь вот это:

<svg width="30" height="30">
  <use xlink:href="img/sprite.svg#some-icon"></use>
</svg>

Хотя даже в этом случае тоже можно простые вещи делать с помощью css. Например изменять цвет при наведении и т.д.