title: nesting an svg inside a div
body: <p>I am trying to create a filled svg triangle which will be placed at <em>some</em> place on the page.</p>
  
  <p>To accomplish this I wrap the svg in a div and place the div appropriately. However, the svg is always rendered outside of the div. How do I get the svg element rendered inside the div?</p>
  
  <p>I can't use the <code>&lt;object&gt;</code> or the <code>&lt;embed&gt;</code> tag due to scripting and templating constraints</p>
  
  <p>Sample HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="inner_container"&gt;
          &lt;svg height="6" width="6"&gt;
              &lt;path d="M 0 6 L 3 0 L 6 6 L 0 6"/&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>#container {width:100px; height:25px; border:1px solid green;}
  #container #inner_container {width:6px; height:6px; border:1px solid red;}
  #inner_container  svg path {fill:black;}
  </code></pre>
  
  <p>The filled triangle should be inside the red rectangle but is rendered outside</p>
  
  <p>See it on <a href="http://jsfiddle.net/648hF/">JsFiddle</a></p>