У популярных сайтов видел вставку base64, image/svg+xml, svg спрайтом и вставку svg отдельным изображением.
Base64 не рассматривается, т.к. svg+xml и так хорошо поддерживается. У svg+xml есть возможно минус, он занимает код в css файле. У яндекса, кстати, `background-image: url('data:image/svg+xml;base64,PHN2...')` был размером 28кб(~28000 символов) в css файле.
У svg спрайта минусов не вижу, почему бы все svg не вставить в него? Запрос 1, вставка в css с помощью `background-position`, в html тег ``. Хотя, если нужна поддержка браузеров которые не поддерживают его, придётся или вставлять svg через css, или делать отдельные изображения svg. Но если нужно манипулировать с svg, анимировать, скрывать, менять цвет отдельных блоков, вставка svg прямиком в html файл - прекрасный вариант, я думаю.
У хранения svg в отдельных файлах есть минус - много запросов на сервер.
PS: Почти все сайты которые я смотрел вставляют svg логотип прямиком в html. Яндекс вставлял его иногда прямиком, иногда тегом img, если лого в png, возможно svg ел много места. У стек оверфлоу лого хранится в спрайте со всеми другими иконками.
Что из этого выбирать и в каких ситуациях? Слишком уж много вариантов. Спасибо за ответ!
TedMarsh, нет никакой разницы
Обычно эти варианты продиктованы выбранной архитектурой или библиотеками внутри приложения. И поэтому здесь больше вопрос к архитектуре и производительности библиотек
Средний
