43222

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 <a href="http://oursite.com/Ourhandler.ashx?t=Circle&v=1&ext=.svg" rel="nofollow">http://oursite.com/Ourhandler.ashx?t=Circle&v=1&ext=.svg</a> 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).

Answer1:

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.

Answer2:

works for me in all browsers:

<a href="http://jsfiddle.net/mihaifm/n8DWe/3/" rel="nofollow">http://jsfiddle.net/mihaifm/n8DWe/3/</a>

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

Answer3:

I have the same problem too.

I use <a href="http://www.fiddler2.com/" rel="nofollow">Fiddler</a> 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.

<strong>Step 1</strong>

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"/>

<strong>Step 2</strong>

Write a HttpModule to <a href="http://msdn.microsoft.com/en-us/library/ms972974.aspx" rel="nofollow">Rewrite</a> the URL to your real URL.

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

Recommend

  • Position Labels on a coordinate System Easeljs
  • Connect two circles with a line
  • htaccess redirect 301 url rewrite
  • HTML/CSS: display circular divs in horizontal scrolling lineup? Divs appear on top of each other?
  • Webkit keyframe not working in chrome
  • How to write Delphi ActiveX control which can be used in MS Word/Excel/Powerpoint?
  • ABCpdf convert text to image
  • actionscript 3.0 transparent image floodfill
  • Botframework - resize bot chat in width [duplicate]
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • How to get the click event on sIFR embedded tag in IE?
  • Undefined navigator.push React-native 0.43.4
  • redirect_to root_url and return unless @user.activated
  • Django invalid literal for int() with base 10
  • How to view images from protected folder with php?
  • Unable to install Git-core+svn by MacPorts
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Django simple Captcha “No module named fields” error
  • Display images in Django
  • Could not find rake using whenever rails
  • Python urlparse: small issue
  • FileReader+canvas image loading problem
  • Display issues when we change from one jquery mobile page to another in firefox
  • Deselecting radio buttons while keeping the View Model in synch
  • Resize panoramic image to fixed size
  • Modifying destination and filename of gulp-svg-sprite
  • JSON with duplicate key names losing information when parsed
  • Importing jscolor library in angular 2
  • Jquery - Jquery Wysiwyg return html as a string
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to include full .NET prerequisite for Wix Burn installer
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do I configure my settings file to work with unit tests?
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • python draw pie shapes with colour filled
  • JaxB to read class hierarchy
  • Binding checkboxes to object values in AngularJs