Why are SVGs not displaying correctly on the page?

Question

SVG

I add svg to the site via php echo file_get_contents(..path..file...), if I add 1-2 svg, then everything is fine, but it’s worth adding more, then firstly, the fill color changes on some images of some fig, and secondly, some elements of one SVG file are not displayed.
For example, the fill color of some element was blue, it turned brown, in another SVG file there is a person and a planet, and so the planet disappears, only the person remains.
I didn’t find img in the file code, everywhere Image (I read somewhere on the internet that it should be Image, not img) + found such a piece "xlink:href="data:image/png;base64,iVBORw0KGgoAA..... ." - where does the png come from? Although the image as a whole is scaled without jambs. Everything is clearly visible at any size.
What could be? SVG skewed or what?

<svg viewBox="0 0 1160 1016" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g filter="url(#filter0_d)">
<path d="M306 802V80H538.45C602.221 80 659.549 94.5458 710.434 123.637C761.318 152.398 800.969 193.226 829.385 246.12C858.131 298.683 872.67 357.692 873 423.148V456.372C873 522.489 858.957 581.83 830.872 634.393C803.116 686.625 763.796 727.618 712.912 757.371C662.358 786.793 605.856 801.669 543.406 802H306ZM479.966 214.383V668.113H540.433C590.326 668.113 628.655 650.426 655.419 615.054C682.183 579.35 695.565 526.457 695.565 456.372V425.132C695.565 355.378 682.183 302.815 655.419 267.442C628.655 232.07 589.665 214.383 538.45 214.383H479.966Z" fill="white"/>
</g>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="25" width="1339" height="1335">
<path d="M362.323 346.752C162.445 524.45 137.95 823.207 307.612 1014.04C477.273 1204.88 776.843 1215.53 976.721 1037.83C1176.6 860.137 1201.09 561.38 1031.43 370.542C861.771 179.705 562.2 169.053 362.323 346.752Z" fill="url(#paint0_radial)"/>
</mask>
....
</svg>

Answer 1

if I add 1-2 svg, then everything is fine, but it’s worth adding more, then firstly, on some images of some fig, the fill color changes, and secondly, some elements of one SVG file are not displayed.

I know that masks, filters, etc. have id in SVG files. As long as SVG is in a vacuum, as a separate picture, everything is ok. When you insert SVG images directly into a page, all id's fall into the "general scope" of the page. And as we know, id on the page should not be duplicated. Your magic is very similar to the fact that something has been duplicated somewhere. So you need to go through all the SVGs and make unique id for the elements everywhere, so that when you insert into the page there are no duplicates anywhere.