Dynamically generated svg that works with IE9

Question

Our web page uses dynamically generated svg from an ashx page. This works in IE8 and earlier using the Adobe SVG plugin. It does not work in IE9 (including compatibility mode). We are using the <object> tag. I am trying to modify the page to work with IE9.

I was able to get SVG to render with a simple test svg I found on the web using:

<embed src="http://oursite.com/circle1.svg" type="image/svg+xml"
    height="200" width="550"/>

However if I change this to:

<embed src="http://oursite.com/ourhandler.ashx?t=Circle&v=1&ext=.svg"
    type="image/svg+xml" height="200" width="550"/>

I get a blank box with a disabled vertical scrollbar.

The output of "ourhandler.ashx?t=Circle&v=1&ext=.svg" is the same content as "circle1.svg" and browsing to http://oursite.com/Ourhandler.ashx?t=Circle&v=1&ext=.svg directly renders correctly in IE9.

What do I need to do to make dynamically generated svg work in IE9? I am not attached to the <embed> tag, but have not had any luck with other methods (such as the <object> tag).

Answer 1

Check if you allow HEAD requests for your handler. IE used to have two GET requests : one for the content-type and one for the object. Now the first request is HEAD, so if the verb is not allowed, the second request won't work.

Answer 2

works for me in all browsers:

http://jsfiddle.net/mihaifm/n8DWe/3/

Maybe it's an issue on how you're encapsulating the embed.

Answer 3

I have the same problem too.

I use Fiddler to trace the problem, then I found that the element didn't post a request to the URL specified by "scr" attribute.But it do request when the ext of "src" starts with ".svg".

Finally I found a solution.

Step 1

I change the src to something like (use ".svgx" ext)

<embed src="http://oursite.com/ourhandler.svgx?t=Circle&v=1"
type="image/svg+xml" height="200" width="550"/>

Step 2

Write a HttpModule to Rewrite the URL to your real URL.

In your case the real URL is http://oursite.com/ourhandler.ashx?t=Circle&v=1&Ext=.svg