Ankhena

Нужно сделать так называемый стек из svg, а не символьный спрайт.
И его можно вставлять куда угодно, как обычно в use или в img или в CSS (псевдо, фоны, маски...).
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

Если вы имеете в виду вставку непосредственно в свойство content псевдоэлемента, то да, тоже можно, но прямо скажем неудобно потом с этим работать. Но это верно и для всего остального, отличного от текста.

Убираете инлайновый fill и красите на здоровье

.socials__link:hover {
  fill: red;
}

А ещё лучше перейти с символьных спрайтов на стеки и не мусорить в разметке, а использовать mask
Сборка стеков, например: https://www.npmjs.com/package/gulp-stacksvg
Также они вставятся и в use и в css в качестве content, bg или mask.
Про маски https://codepen.io/noahblon/post/coloring-svgs-in-...

Замените в разметке на :view-box.camel="viewbox"
Кстати, я нагуглила ответ за 1,5 минуты.

Псевдоэлементами с радиальным градиентом
По аналогии с https://codepen.io/AnnaSummer/pen/GRyVzeY

Это не контентные изображения.
Это украшения ссылок, их делают фонами и/или псевдоэлементами.
Поменять цвет удобно с помощью mask https://codepen.io/noahblon/post/coloring-svgs-in-...

Возможно ли это сделать для svg, добавленный через тег img?

Можно с помощью фильтров. Метод описан в статье по ссылке выше. Мало удобен.

Или лучше вставить код файла svg?

Лучше убрать картинки в css и использовать как mask.
Можно заинлайнить в CSS с помощью https://yoksel.github.io/url-encoder/

Так и писать
.block:hover .arbitrazh-19 {animation: и т.д.}

Потому что вот так:

.icon-facebook:hover::before{
  color: red;
}

Либо:

.icon-facebook {
  color: #ccc;
}
.icon-facebook::before {
  content: "\e900";
}
.icon-facebook:hover{
  color: red;
}

Из такого типа id effect1_dropShadow_90:1733
уберите такие дополнения :1733

Нужно прочитать про свойство background-size.
И да, убрать размеры из svg.

Фоновые изображения адаптируются с помощью background-size
Или изменения размеров блока. Например, вставляются как фон псевдоэлемента и дальше регулируют размер псевдо, а фону задают contain, cover или 100% (или не 100)

Единственно отличие между растром и SVG в том, что растр меняет свои пропорции, а SVG обычно нет.
Чтобы менялись пропорции SVG у него должен быть атрибут preserveAspectRatio

Вот примеры
https://jsfiddle.net/0xrh6uvj/ - меняйте ширину окна с результатом

----
Но вы не сделали песочницу на jsfiddle.net с вашим проблемным кодом и не ясно, что вообще вы там творите.

Вставляйте через object, тогда стили сработают.

Обычный псевдо с радиальным градиентом
https://jsfiddle.net/b6oqpr5L/

Альтернатива: border-radius и огромная тень

Можете, но внутри svg, кроме symbol еще должны быть view и use.

dreamhelg.ru/2017/02/symbol-svg-sprite-detail-guide
Раздел "Использование в качестве background-image"

Вот такой SVG работает и в ИЕ11 и в Edge

<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>

Если нет, проверяйте кеш.

ctrl+c ctrl+v
https://jsfiddle.net/4ed5xjw7/