Working with svgs Inline or not? How to merge svg with effects from Photoshop?

Question

HTML

Good afternoon!

Faced with another uncertainty. There is a button with an icon that reverses the color. There are many implementations: pseudo-elements, icon fonts, sprites, inline svg. How do you solve such problems when you need to change the color of decorative elements? Would you inline, small decorative elements ?

When inline, I encountered the following problem, the search icon (magnifying glass), as if drawn with poor quality, when I change its color with hover, through the property fill, it is noticeable that the circle is a little blurry in pixels. When zooming in, I do not notice such problems. What is it? How to deal with it? Can I run it through services or throw it back into illustrator?
Also, if you inline, is it normal for a button, a decorative svgelement,position absolutely ? Not as a pseudo element.

I'm trying to implement it through a pseudo element with image replacement through a hover. There are no particular problems in the layout, but I could not pull out the hover version from Photoshop, pure svg . I download the image from the layer, through the content export. The svg picchi in photoshop has effects that change the color of the image for hoverthe event... How to combine these effects with the svg? If I click convert to smart object, I get the necessary gluing, but inside it turns out to be base64 ... I don't really like it, because if necessary, I can't control this state with a standard call to svg. There are other options? Option to get normal svg .

Sprites and svg sprites, how relevant is this in 2021 ? In what cases do you use this technology if you need to draw a different state of an element when an event occurs on it?

Property mask-image , do you use it? Support for ie 11 and below is zero.

Answer 1

I use either character sprites or inline.
I adjust all the icons with pens in the chandelier. I bring to a single viewbox, center and align by pixels.