CODEWITHSUNDEEP
iframesvginternet-explorer-9
Mr.Hunt
Mr.Hunt

Reputation: 4851

SVG does not render inside iframe in IE9

I am creating visualizations using svg and it renders fine in IE9. I am working on functionality where user can embed the visualizations into their pages. I am doing this via iframe. I am facing an issue with SVG not rendering when inside iframe in IE9.

Here is a short example which works in most browsers but show blank in IE9.

    <html><body>
    <iframe width="640" height="480"       src="http://www.croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg"/>
    </body></html>

any ideas? thanks.

Upvotes: 1

Views: 2196

Answers (1)

Mr.Hunt
Mr.Hunt

Reputation: 4851

IE9 requires a 

 <!DOCTYPE html>

declaration in the beginning to render the document in standards mode otherwise it was falling back to quirks mode.

Now one can put it either at the top of above example which I gave, making it:

 <!DOCTYPE html>
 <html><body>
<iframe width="640" height="480"       src="http://www.croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg"/>
</body></html>

but the since users would be embedding the iframe in their pages & obviously one cannot rely on their pages always having doctype defined. so a better solution would be add "" within iframe. Further I would like to point that multiple doctypes will not affect page rendering as doctype defined inside iframe only applies to iframe.

I wished IE9 would detect these features in page like other browsers and render properly in future.

Upvotes: 2

Related Questions