nested SVGs will generate XML declaration in each SVG

[NikkyAI]

nested SVGs are a easy way to group elements together and drawing a picture inside a picture

sadly it seems like RenderMode.FILE did not take this into account (also the x, y properties)

example:

val svg = SVG.svg {
    id = "s0"
    width = "256"
    height = "256"
    rect {
        id = "r0"
        width = "100%"
        height = "100%"
        x = "0"
        y = "0"
        stroke = "red"
        strokeWidth = "3"
        fill = "purple"
    }
    children += SVG.svg {
        id = "s1"
        width = "80%"
        height = "80%"
        attributes["x"] = "10%"
        attributes["y"] = "10%"
        rect {
            id = "r1"
            width = "100%"
            height = "100%"
            x = "0"
            y = "0"
            stroke = "red"
            strokeWidth = "3"
            fill = "blue"
        }
        children += SVG.svg {
            id = "s2"
            width = "80%"
            height = "80%"
            attributes["x"] = "10%"
            attributes["y"] = "10%"
            rect {
                id = "r2"
                width = "100%"
                height = "100%"
                x = "0"
                y = "0"
                stroke = "red"
                strokeWidth = "3"
                fill = "cyan"
            }
        }
    }
}
val borkedSVG = buildString {
    svg.render(this, RenderMode.FILE)
}.also {
    File("test_broken.svg").writeText(it)
    println(it)
}

broken output:

<?xml version="1.0" encoding="UTF-8" ?>
<svg height="256" id="s0" width="256" xmlns="http://www.w3.org/2000/svg">
<rect fill="purple" height="100%" id="r0" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<?xml version="1.0" encoding="UTF-8" ?>
<svg height="80%" id="s1" width="80%" x="10%" xmlns="http://www.w3.org/2000/svg" y="10%">
<rect fill="blue" height="100%" id="r1" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<?xml version="1.0" encoding="UTF-8" ?>
<svg height="80%" id="s2" width="80%" x="10%" xmlns="http://www.w3.org/2000/svg" y="10%">
<rect fill="cyan" height="100%" id="r2" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
</svg>
</svg>
</svg>

expected/fixed:

<?xml version="1.0" encoding="UTF-8" ?>
<svg height="256" id="s0" width="256" xmlns="http://www.w3.org/2000/svg">
<rect fill="purple" height="100%" id="r0" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<svg height="80%" id="s1" width="80%" x="10%" y="10%">
<rect fill="blue" height="100%" id="r1" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<svg height="80%" id="s2" width="80%" x="10%" y="10%">
<rect fill="cyan" height="100%" id="r2" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
</svg>
</svg>
</svg>