<!doctype html>
<style>
svg {
width: 100px;
height: 100px;
margin: 1px;
}
#test-root {
position: absolute;
left: 10px;
top: 10px;
}
#test-child {
position: absolute;
left: 10px;
top: 130px;
}
</style>
<p id="test-root">
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
</p>
<p id="test-child">
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
<svg viewBox="0 0 50 50">
<rect fill="lime" x="0" y="0" height="50" width="50"/>
</svg>
</p>