Вопрос: какой же все же способ подключения svg наиболее оптимальный, удобный, а главное качественный?
Оптимального не существует, все зависит от конкретной задачи. Для спрайтов и иконок я предпочитаю инлайновый svg - да, это увеличит html на десяток килобайт, но не критично, gzip наше все. Зато это дает огромную гибкость в управлении иконками и их стилизации. Забейте на громоздкий html - сейчас ситуация такова, что в любом случае приходится чем-то жертвовать, идеальных технологий нет. Поэтому нужно выбирать - красивый html или гибкость в управлении. Используя же систему сборки + шаблонизатор вроде pug, вы вообще с html не будете иметь дела.
Для отдельных изображений сподручнее применять отдельные же svg-файлы. Для простых иконок, с которыми априори не нужно никаких манипуляций, можно использовать фоновый svg.
Как вариант, можно захардкодить стили (анимацию там, эффекты) прямо в svg - это нормально, ведь адаптивность для svg только так и можно сделать. Тогда вы сможете сохранить нехилую долю возможностей вкупе с изящной реализацией, подключая svg к странице посредством, например, fragment identifiers.
Генерировать svg в font - это костыль. Нормально, если
шрифт генерируется в формат svg, но если спрайт генерируется в font, то это уже извращения. Кроме того, браузеры по-разному рендерят решения на основе данного подхода, что снижает качество продукта.
