I have a few sub SVG's (country flags) in one SVG file. I wanted to add another one, but it is not displayed correctly. Parts in the circle in the center are missing in file "flags.svg". But if you look at file "in2.svg", the flag is displayed just fine.
The only reason I can think of why this happens, because it has a viewbox attribute. The other sub SVG's do not. Is that true? How can I fix it?
Run the code snippets to see what I mean.
flags.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 2000">
<view id="it" viewBox="0 0 750 500" />
<view id="nl" viewBox="0 500 750 500" />
<view id="en" viewBox="0 1000 750 500" />
<view id="in" viewBox="0 1500 750 500" />
<svg width="750" height="500" y="0">
<path d="M0 0h750v500H0z" style="fill:#009246;fill-opacity:1;stroke:none"/>
<path d="M250 0h500v500H250Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1"/>
<path d="M500 0h250v500H500Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#ce2b37;fill-opacity:1"/>
</svg>
<svg width="750" height="500" y="500">
<path d="M0 0h750v500H0z" style="fill:#21468b;fill-opacity:1;stroke:none"/>
<path d="M0 0h750v333.332H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1"/>
<path d="M0 0h750v166.668H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#ae1c28;fill-opacity:1"/>
</svg>
<svg width="750" height="500" y="1000">
<defs>
<clipPath id="a">
<path d="M375 250h375v250Zm0 0v250H0Zm0 0H0V0Zm0 0V0h375Zm0 0"/>
</clipPath>
</defs>
<path d="M0 0h750v500H0z" style="fill:#00247d;fill-opacity:1;stroke:none"/>
<path d="m0 0 60 40m0-40L0 40" style="fill:none;stroke-width:6.932255;stroke-linecap:butt;stroke-linejoin:miter;stroke:#fff;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5)"/>
<g clip-path="url(#a)">
<path d="m0 0 60 30m0-30L0 30" style="fill:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke:#cf142b;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5 16.66667)"/>
</g>
<path d="M30 0v40M0 20h60" style="fill:none;stroke-width:11.553759;stroke-linecap:butt;stroke-linejoin:miter;stroke:#fff;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5)"/>
<path d="M30 0v40M0 20h60" style="fill:none;stroke-width:6.932255;stroke-linecap:butt;stroke-linejoin:miter;stroke:#cf142b;stroke-opacity:1;stroke-miterlimit:4" transform="scale(12.5)"/>
</svg>
<svg width="750" height="500" y="1500">
<path d="M0 0h750v500H0z" style="fill:#ffce00;fill-opacity:1;stroke:none"/>
<path d="M0 0h750v333.332H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#d00;fill-opacity:1"/>
<path d="M0 0h750v166.668H0Zm0 0" style="stroke:none;fill-rule:nonzero;fill:#000;fill-opacity:1"/>
</svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="500" y="1500" viewBox="-45 -30 90 60" fill="#07038D">
<path fill="#FFF" d="M-45-30h90v60h-90z"/>
<path fill="#FF6820" d="M-45-30h90v20h-90z"/>
<path fill="#046A38" d="M-45 10h90v20h-90z"/>
<circle r="9.25"/>
<circle fill="#FFF" r="8"/>
<circle r="1.6"/>
<g id="d">
<g id="c">
<g id="b">
<g id="a">
<path d="m0-8 .3 4.814L0-.802l-.3-2.384z"/>
<circle transform="rotate(7.5)" r=".35" cy="-8"/>
</g>
<use xlink:href="#a" transform="scale(-1)"/>
</g>
<use xlink:href="#b" transform="rotate(15)"/>
</g>
<use xlink:href="#c" transform="rotate(30)"/>
</g>
<use xlink:href="#d" transform="rotate(60)"/>
<use xlink:href="#d" transform="rotate(120)"/>
</svg>
</svg>in2.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="500" viewBox="-45 -30 90 60" fill="#07038D">
<path fill="#FFF" d="M-45-30h90v60h-90z"/>
<path fill="#FF6820" d="M-45-30h90v20h-90z"/>
<path fill="#046A38" d="M-45 10h90v20h-90z"/>
<circle r="9.25"/>
<circle fill="#FFF" r="8"/>
<circle r="1.6"/>
<g id="d">
<g id="c">
<g id="b">
<g id="a">
<path d="m0-8 .3 4.814L0-.802l-.3-2.384z"/>
<circle transform="rotate(7.5)" r=".35" cy="-8"/>
</g>
<use xlink:href="#a" transform="scale(-1)"/>
</g>
<use xlink:href="#b" transform="rotate(15)"/>
</g>
<use xlink:href="#c" transform="rotate(30)"/>
</g>
<use xlink:href="#d" transform="rotate(60)"/>
<use xlink:href="#d" transform="rotate(120)"/>
</svg>As @enxaneta said, the id's in the Indian flag SVG where not unique anymore after adding them to the other SVG.
Changing the ID's fixed the problem.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="500" y="3000" viewBox="-45 -30 90 60" fill="#07038D">
<path fill="#FFF" d="M-45-30h90v60h-90z"/>
<path fill="#FF6820" d="M-45-30h90v20h-90z"/>
<path fill="#046A38" d="M-45 10h90v20h-90z"/>
<circle r="9.25"/>
<circle fill="#FFF" r="8"/>
<circle r="1.6"/>
<g id="dw">
<g id="cw">
<g id="bw">
<g id="aw">
<path d="m0-8 .3 4.814L0-.802l-.3-2.384z"/>
<circle transform="rotate(7.5)" r=".35" cy="-8"/>
</g>
<use xlink:href="#aw" transform="scale(-1)"/>
</g>
<use xlink:href="#bw" transform="rotate(15)"/>
</g>
<use xlink:href="#cw" transform="rotate(30)"/>
</g>
<use xlink:href="#dw" transform="rotate(60)"/>
<use xlink:href="#dw" transform="rotate(120)"/>
</svg>