html - nesting an svg inside a div -

i trying create filled svg triangle placed @ some place on page.

to accomplish wrap svg in div , place div appropriately. however, svg rendered outside of div. how svg element rendered inside div?

i can't use <object> or <embed> tag due scripting , 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 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 inside red rectangle rendered outside

see on jsfiddle

change css selector, write svg{...} , add float:left

here path drawing not element.

svg {fill:black; float:left} 

demo