Нужно использовать symbol, вот статьи с описанием методологии:
https://css-tricks.com/svg-sprites-use-better-icon...
https://css-tricks.com/svg-symbol-good-choice-icons/
В кратце, у нас есть один большой SVG со всеми изображениями в виде символов:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
Подключаем картинки на странице:
<svg class="icon">
<use xlink:href="#shape-icon-1" />
</svg>
<svg class="icon">
<use xlink:href="#shape-icon-2" />
</svg>
Всё картинки можно стилизовать через CSS (например задать заливку
fill: black и т. д.). Замечу, что атрибут viewBox для символов нужно задавать обязательно, что-бы картинки правильно масштабировались (например если вы будете изменять их размеры).
Если вы используете grunt, взгляните в сторону grunt-svgstore:
https://github.com/FWeinb/grunt-svgstore для автоматизации сборки картинок и обётки оных в один SVG контейнер.
