How to copy an SVG element's content to another SVG element and keep synchronization

Question

Having two SVG elements ( SVG1 and SVG2 ) where SVG1 is a large area with various elements, that get added, removed and repositioned from time to time. SVG2 on the other hand needs to be used to act as an iconized reppresentation (small) version of SVG1, being quite smaller, but whatever SVG1 shows, SVG2 shows in a very small scale.

<SVG id="SVG1" width=1000 height=1000>
    <g transform="scale(1)">
    .... elements here....
    </g>
</SVG>

<SVG id="SVG2" width=100 height=100>
    <g transform="scale(0.1)">
    .... elements here....
    </g>
</SVG>

I believe the approach is to programmatically synchronize the element changes that end up on SVG1 so they also end up on SVG2, with unique IDs of course.

... but I wonder if there is a simpler way that ensures that, something like a mirroring feature or something that, or alternatively scan down the DOM tree of SVG1 and replicate it into SVG2.

Answer 1

Make the second SVG just a <use> element that points to the first. You can scale the <use> using a transform. It will always reflect whatever you do to the first SVG automatically.

<svg width="100" height="100">
    <use transform="scale(0.1)" xlink:href="#SVG1"/>
</svg>