How to fit an SVG block to a USE block in size?

Question

css

In general, the SVG block is always larger than the USE block. I can't get the size right.
https://codepen.io/papagis/pen/XWaprKz

Answer 1

Since your SVG is rectangular, it fits only in the side view mode, and in all other cases it pops out and saves us if we write this in .bbb. preserveAspectRatio="none" viewBox="0 0 24 24"
That is, like this:

<svg class="bbb" preserveAspectRatio="none" viewBox="0 0 24 24" style="max-height: 99vh;display: block; margin: auto;">
         <use xlink:href="#filtra1"  />
       </svg>

Answer 2

.bbb {
  height: 100px;
  width: 100px;
};

And delete all the game that I wrote before

Answer 3

<svg class="icon_userpic" viewBox="0 0 32 32">
svg:not(:root) {
    overflow: hidden;
}

You can see directly on this site

Answer 4

- How many users do you need to emulate?
- What is the level of complexity of the website?
- What is the budget for building a platform for loading. testing?
- What is the level of training of the tester?
Take a look at this framework .