nesting an svg inside a div

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