What is the correct way to embed and assemble an SVG sprite?

Question

BEM

You assemble it into a sprite to use it through use , in html you need to specify width and auto for svg so that the picture is not displayed / enlarged to full screen. But when you go to CSS to style it, the size doesn't change from CSS.
Task: for the mobile version, change the icon size from 70px to 30px . It will be cropped and will not grow. The problem is solved through viewBox , while not setting the width and height of the SVG element in html when inlining from the sprite through use. Then the sizes in CSS are controlled.
A few questions:
First: they say you need to set the width and height of the svg, how to actually be, given the problem that I described above? Is it possible to control the width and height with CSS? Or what to do in such a situation?
Second: is it correct, based on the semantics, to insert / prescribe icons in HTML, and not through the background in CSS (they are behind glass - there is no way to control them).
Inline svg outside the sprite (use) - is not cached, is it correct to collect svg images (logo, something else) and icons into a sprite, inline everything through use, set the viewBox (to control the size), set the size and change it through CSS Colour.
Third: How to distribute icons, backgrounds in general. And for example, on desktop resolution one logo, on mobile another, not in size, but in design - another logo, for example, the color also needs to be changed on hover. I can change the image through the background (background-image) based on the size of the version (@media), but if it's SVG and you need to change the color, but you can't change the color through CSS, I have 2 versions (2 versions of colors) of SVG to save and change through the background in CSS?
BEM question:
How to display a sprite correctly in the BEM file structure, each block has its own markup, style, script, “picture”. If the “picture” for a certain block, element lies in a sprite (in a separate - in a common document), how to do it right?
For example, I have a “search” block - I create a search folder there html, scss, js, img - but there is no icon, it is in a sprite.
Or each block needs a separate SVG icon/picture (without sprites), inserted into HTML, but then it won't be cached.

Answer 1

This is how it's done

<svg style="display:none;">
   <defs>
     <symbol id="icon1">
        <path d="M......z" />
     </symbol>
     <symbol id="icon2">
        <path d="M......z" />
     </symbol>
     <symbol id="icon3">
        <path d="M......z" />
     </symbol>
   </defs>
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon1">
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon2">
</svg>

<svg viewbox="0 0 500 500" preserveAspectRatio="none" width="" height="">
   <use xlink:href="#icon3">
</svg>

Answer 2

1. Using CSS is corny more convenient, there are no special reasons to set sizes inline.
2. Embedding icons in SVG is a normal practice, the semantics are not entirely important here, usually the icon is part of the design, not the content. The character sprite is part of HTML, so it is also compressed and cached, it depends more on the server settings.
3. If the logo on mobile and PC is similar, we just control it through CSS, if not, then you can use two different logos.
4. Keep the icons together with the block, generate the sprite dynamically depending on which icons are used.