Запись создана на основе статьи A few HTML tips.

SVG файлы можно использовать не только с помощью <img> тега:

<img src="acolyte_cartoon.svg" alt="acolyte">

Можно создавать SVG спрайты. 

Для этого создается один SVG файл, в котором каждое изображение заворачивается в тег <symbol>:

<svg>
    <symbol id="social-twitter" viewBox="...">
        <!-- actual image data here -->
    </symbol>
</svg>

Затем картинка может быть добавлена на страницу след. образом:

<svg class="social-icon">
    <use xlink:href="icons.svg#social-twitter" />
</svg>

Для создания SVG спрайтов можно использовать плагин gulp-svgstore, который автоматически создает спрайты из отдельных файлов.

Особенно приятно, что используя <svg> вместо <img>, мы можем применять CSS стили:

.social-icon {
    fill: #000;
    transition: all 0.2s;
}

.social-icon:hover {
    fill: #00f;
}

Есть, однако, некоторые CSS ограничения. При использовании SVG в теге <use> со связыванием <symbol>, картинка будет размещена в Shadow DOM и мы потеряем некоторые CSS возможности. Некоторые свойства (как fill) будут применены к элементам только, если они 'undefined'.