Part of the image is missing when scaling an SVG. How to win?

Question

SVG

Hello.
There is a certain set of characters, each of which is an image in SVG format.
From these symbols I draw inline SVG. Those. I create a new SVG using the svg.js library and add symbols (nested SVG) to it with certain coordinates. It turns out the image I need that I display in the browser.
Next, I have the zoom functionality. Sometimes the image at 100% scale is very large and I shrink it to the size of the div in which it is drawn.
And this is where the problem happens. Assume that there are several identical characters in the image. B, the character has fine detail (a 2 pixel line). And so at reduction of the image on some symbols this line vanishes. Some remain. With further reduction, the line may return and disappear at another instance of the symbol.
If it disappeared for all instances of the symbol at once, then it would be somehow logical and I would even probably reconcile. But it disappears randomly. The problem is in opera, chrome, ie, edge.
Question: How can this problem be overcome?

Answer 1

In general, I had to abandon the use of SVG inside SVG.
As soon as I started to insert only the body of the symbol directly, everything returned to normal