Why does the svg get blurry when you make it smaller?

Question

css

Hello. I drew a very simple icon in illustrator, pixelated it, etc. I insert through background-image. Initially, I drew 40x40 in size, I set the background size to the same. Everything is gorgeous. But if you need to do more or less - blurs. Can it be avoided somehow? Or am I doing something wrong?

Answer 1

When resizing an image, it may become impossible to fit it pixel by pixel. The browser uses anti-aliasing for such cases, which manifests itself in blurring the borders. You can try setting the SVG property shape-rendering: crispEdges, which turns off anti-aliasing. Or redraw the icon so that it looks normal at least at some standard sizes.

Answer 2

there is a video on this topic on YouTube
like how to prepare svg
, it seems that the only way to avoid this was described there - to embed svg directly into css as base64...