title: Why nest an <svg> element inside another <svg> element?
body: <p>Why would a demo such as this: <a href="http://jsbin.com/ejorus/2/edit">http://jsbin.com/ejorus/2/edit</a>, have an <code>&lt;svg&gt;</code> element nested inside another <code>&lt;svg&gt;</code> element?</p>
  
  <pre><code>&lt;svg class="graph"&gt;
      &lt;svg viewBox="0 0 1000 1000" preserveAspectRatio="none"&gt;
          &lt;g transform="translate(30,0)"&gt;
              &lt;!-- ... --&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The JS Bin is a modified version of <a href="http://meloncholy.com/static/demos/responsive-svg-graph-1/">the demo</a> in this blog post: <a href="http://meloncholy.com/blog/making-responsive-svg-graphs/">http://meloncholy.com/blog/making-responsive-svg-graphs/</a></p>