Broken SVGs while running the Polymer tutorial? Fiddler to the rescue

I am a big fan of Javascript and the Polymer Project. The Webcomponents and ES6 content however generally seem to be targeting the OSX/Sublime setup. So some of the steps in the blogs/tutorials don't work straight away in VS2012/Win8.

The polymer project tutorial specifically says this regarding SVG images rendering:

Note: On Windows, Python’s simple HTTP server may not provide the correct MIME type for SVG images. If the images don’t render, try a different web server.

I am using ASP.Net development server to run the samples and the SVG images are rendered as broken icons.

In order to fix the SVG rending you'll just have to add the following Response Headers when the request is for a SVG.

Content-Type: image/svg+xml

Vary: Accept-Encoding

It is easy to do this Fiddler, instead of trying to install a different HTTP Server. In order to edit the response rules, select Rules -> Customize Rules

Add the following lines inside the OnBeforeResponse method

 if(oSession.uriContains("svg")){
    oSession.oResponse["Content-Type"] = "image/svg+xml";
    oSession.oResponse["Vary"] = "Accept-Encoding";
 }

The SVG images will now be rendered properly. Here is the response with the additional headers injected from Fiddler.