title: How to copy an SVG element's content to another SVG element and keep synchronization
body: <p>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 <strong>iconized reppresentation (small)</strong> version of SVG1, being quite smaller, but whatever SVG1 shows, SVG2 shows in a very small scale. </p>
  
  <pre><code>&lt;SVG id="SVG1" width=1000 height=1000&gt;
      &lt;g transform="scale(1)"&gt;
      .... elements here....
      &lt;/g&gt;
  &lt;/SVG&gt;
  
  &lt;SVG id="SVG2" width=100 height=100&gt;
      &lt;g transform="scale(0.1)"&gt;
      .... elements here....
      &lt;/g&gt;
  &lt;/SVG&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>... 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.</p>