title: SVG nested <svg> vs group
body: <p>I know that there are two ways in SVG to group shapes together and position them as a collection: nesting <code>&lt;svg&gt;</code> tag and <code>&lt;g&gt;</code> grouping. However, I don't see much difference between them. For example, the following two pieces of code produce exactly the same result:</p>
  
  <p>Using group <a href="https://jsfiddle.net/8q4on01m/5/" rel="noreferrer">(jsfiddle)</a>:
  <a href="https://jsfiddle.net/8q4on01m/5/" rel="noreferrer">https://jsfiddle.net/8q4on01m/5/</a></p>
  
  <pre><code>&lt;svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;g transform="translate(200 200)"&gt;
      &lt;rect x="0" y="0" height="100" width="100" style="fill: yellow"&gt;&lt;/rect&gt;
  
      &lt;rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"&gt;&lt;/rect&gt;
  
      &lt;rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"&gt;&lt;/rect&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Using <code>&lt;svg&gt;</code> <a href="https://jsfiddle.net/54Lk7e02/5/" rel="noreferrer">(jsfiddle)</a>:</p>
  
  <pre><code>&lt;svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;svg x="200" y="200"&gt;
      &lt;rect x="0" y="0" height="100" width="100" style="fill: yellow"&gt;&lt;/rect&gt;
  
      &lt;rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"&gt;&lt;/rect&gt;
  
      &lt;rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"&gt;&lt;/rect&gt;
    &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Which one is preferred/recommended? What are the pros and cons, important features of each? I am especially interested in handling bubbling click events issues.</p>