Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет.
На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались.
Сейчас опишу, как я делаю.
1) Создаем JS файл с inline SVG. К примеру, такой
// Тут хранятся иконки в SVG
var icon = '
<svg style="display:none;">\
<defs>\
<symbol id="header-phone" viewBox="0 0 850.394 850.394">...</symbol>\
</defs>\
</svg>';
// Вставляем иконки в HTML
document.getElementById('svg-icon-placeholder').innerHTML = icon;
2) Создаем в HTML пустой div с id svg-icon-placeholder. В него мы и будем вставлять SVG
3) Юзаем через use :)
Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)
Средний
