How to fix blurry svg icons in different browsers?

Question

css

Hello!
There is an example of an svg icon.
It only displays properly in Chrome . In FF and IE it is blurred and clipped.
How to fix display? What can you suggest?

Answer 1

jsfiddle.net/qbshau80/4
Add transform: translateZ(0);to .link svg
Not tested in IE but helps in FF.
As far as I understand, in FF, when rendering SVG, all parent indents are taken into account, and if they do not exactly fall into pixels, then this is imperceptible in the blocks themselves, but the SVG anti-aliasing algorithm notices this. For example, if the parent's padding is not exactly 5px, but, let's say 4.95px, then you will never notice this, but the SVG will no longer hit the pixels clearly and will be “blurry”.
transformforces the rounding of the image border to pixels and everything falls into place.

Answer 2

https://jsfiddle.net/qbshau80/3/
https://developer.mozilla.org/ru/docs/Web/SVG/Attr...