How to properly prepare an SVG sprite for layout?

Question

Design

It often happens that as a result the icons in the sprite acquire unpleasant blurry edges (when viewed in the browser or on the site itself), although everything is clearly aligned in Illustrator.
What could be the snag? Are there any tricks to keep in mind when saving an SVG sprite?

Answer 1

The icon must fit into the pixel, in illustrator there is, in my opinion, the align to pixel grid setting . There are tutorials on the Internet on the subject.

Answer 2

seems like a way to solve blurry svg is to embed it as base64

Answer 3

Once I tried to overcome this problem and asked about it on Habré https://habrahabr.ru/post/245583/#comment_8183581 (and there is a demo).
This is not treated yet (I have not met a reinforced concrete solution). Even perfect icons can fall between the pixels in the browser. Because, in the browser, the calculated values ​​​​of height and width can be non-integer. This is where sub-pixel anti-aliasing comes into play: “we don't have to round the icon's start position to whole pixels anymore, we can render it right here at 33.24px 46.05px! Hurrah!"
There will be no blurring when svg is embedded via img tag, background or base64. But this is no longer an SVG sprite.