Как правильно использовать SVG для иконок / лучшие практики

Question

Ищу совет по работе с изображениями SVG, соответственно иконки.

Что я пробовал

Если я использую иконки PNG, CSS выглядит так:

elem:after {background: url('icon.png'); ...}

Я пробовал так же

elem:after {background: url('icon.svg'); ...}

но это не то, что я ищу. Это решение теряет преимущества иконок SVG (они маленькие и размытые, нечеткие).

Что у меня есть

Я сгенерировал этот код онлайн с помощью приложения Icomoon.

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-love" viewBox="0 0 33 32">
            <title>love</title>
            <path d="M32.916 15.597c0.604-0.66 ..."></path>
        </symbol> 
        <symbol id="icon-shop" viewBox="0 0 34 32">
            <title>shop</title>
            <path d="M17.148 27.977c-..."></path>
        </symbol>
     </defs>
</svg>

<svg class="icon icon-shop">
    <use xlink:href="#icon-shop"></use>
</svg>

Мой вопрос

1. Семантически ли правильно помещать значки в разметку HTML вместо того, чтобы помещать их в CSS?

2. На всем сайте около 60 иконок, любые уникальные, любые повторяются еще раз. Сгенерированная разметка выше имеет около 50 КБ.
   Могу ли я поместить все значки в общий шаблон макета и загрузить их на весь сайт или включить только значки, которые я использую на странице?
   
   Здесь я нашел Как изменить цвет изображения SVG с помощью CSS (замена изображения jQuery SVG)? (3 года назад), но не знаете, правильно ли это.

3. Как правильно кэшировать SVG? Это возможно, когда я использую это, как я пишу выше?

Я прочитал много статей, но не совсем уверен, как это сделать наилучшим образом.

Спасибо за совет.