SVG mouseover behavior lost when trying to load it from external resource into html

Question

See this jsfiddle

<svg xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="20"
   height="20">
    <path fill="#a00"
       fill-opacity="1"
       stroke="none"
    d="M 0,0 L 17,9 L 0,18 L 6,9 Z"
       transform="rotate(180 8.5 9)"
       onmouseover="evt.target.setAttribute('fill', '#cc0');"
       onmouseout="evt.target.setAttribute('fill','#a00');"/>
</svg>

it displays an arrow which changes color as you hover over it.

If i save above code in a svg file, then try to include it in a page via javascript like below:

var div = document.getElementById("div");
var img = new Image();
img.src = "http://dl.dropboxusercontent.com/u/74728667/left_arrow.svg";
div.appendChild(img);

i can see the arrow but the hover behavior is lost - example here. its understandable as the svg has been reduced to an img. My question is what can i do so that i don't lose the hover behavior? note i am not interested in getting the hover behavior via css since i don't like having the code in two places.

Answer 1

You could include the SVG via an <object> or <iframe> tag instead. Both allow interactivity and scripting, neither of which are allowed by the <img> tag.