nesting an svg inside a div - html

Question

I am trying to create a filled svg triangle which will be placed at some place on the page.
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?
I can't use the <object> or the <embed> tag due to scripting and templating constraints
Sample HTML
<div id="container">
<div id="inner_container">
<svg height="6" width="6">
<path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
</svg>
</div>
</div>
And the CSS
#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;}
The filled triangle should be inside the red rectangle but is rendered outside
See it on JsFiddle

Answer 1

Change the css selector, write only svg{...} and add float:left
Here path is just a drawing not an element.
svg {fill:black; float:left}
DEMO

Answer 2

Try this:
#container { float: left; width: 100px; height: 25px; border: 1px solid green; }
#container #inner_container { float: left; width: 6px; height: 6px; border: 1px solid red; }
#inner_container svg { display: block; float: left; }
I add some floats in there so that they 'contain' the elements. There are better and more elegant ways to do this, but it should work.
Hope this helps.
Mikey.

Answer 3

The problem is that you didn't specify namespace for svg element. This is how it works:
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
</svg>
</div>