Качественное отображение svg-иконок

[alex_web64]

Здравствуйте.

Сейчас все большую популярность набирает вывод иконок на сайте с помощью тегов svg>use.

Для создания наборов я использую сервис IcoMoon. Проблема в том, что при выводе одной и той же иконки с помощью шрифта и тегом качество последней оставляет желать лучшего. Если на больших размерах разница не так заметна, то на маленьких все совсем плохо (см. скрин. Иконка menu c набора FontAwesome).

В интернете находил советы применить к тегу svg transform: translateZ(0); или shape-rendering: crispedges; В случае с иконкой-бургером это решает проблему, но с чем-то более сложным результат выходит еще хуже, чем был до этого.

Еще и ФФ при некоторых размерах шрифта обрезает иконки на несколько пикселей. При этом иконочный шрифт работает превосходно отображает любые иконки и в любом размере.

Как мне добиться такого же качества, как у иконочных шрифтов?

 

[npofopr]

А у вас точно svg? судя по скрину там jpg какой то. 
Лучше бы вы пример показали. Чем словами описывали проблемы. 

[alex_web64]

https://jsfiddle.net/qvberz4d/

Edited July 8, 2019 by alex_web64