JohnDoe116, опыт и Google. IE 11 не настолько безнадёжен. Лично я спокойно под него верстаю на flex'ах всё и вся. Просто тупо учитесь и ищите решения проблемных моментов по мере их поступления.
Eduard07, насчёт иконочных шрифтов -- можно, но лучше через внешний файл svg#use -- так более универсальнo, но требует полифила (svg4everybody) для работы в IE и старых версиях EDGE.
1. Конвертер в base64 (но зачем?).
2. А что мешает это сделать самому?
3. Что такое «простой и непростой SVG»? Вы уверены, что Webpack вам поможет в деле анимирования SVG? И зачем тут вообще Webpack? Покажите пример анимации, который вам нужен.
С точки зрения оптимизации лучше вообще не использовать это свойство. Оно в разных браузерах работает по-разному. И по моему опыту, могу сказать, что оно лишь делает хуже, т. к. форсирует обработку конкретного элемента.
Если уж и использовать, то вариант с JS предпочтительнее.
Ваш вопрос насчёт сравнения с :hover не совсем корректный, так там у браузера нет указания, мол, обрати внимание, что сейчас тут перекинь свои силы на обработку данного элемента. :hover не имеет какого-то повышенного приоритета — и это хорошо.
Без понимания дизайна так говорить нельзя. Вы уверены, что в данном случае ему нужно inline-отображение? Уверены, что он обёртками не хочет разграничить зоны? В примере логотипа, где есть обертка, а уже внутри img, — это абсолютно нормальная практика.
