How to configure IIS for SVG and web testing with Visual Studio

configurationiis-7imagevisual studio 2010

Let's say I have a simple web page with svg image in it:

<img src="foobar.svg" alt="not working" />

If I make this page as static html page and view it directly svg is displayed. If I type the address of this svg — it is displayed.

But when I make this as .aspx page and launch it dynamically from Visual Studio I get alt text. If I type the address of this svg (from localhost, not as a local file) — browser tries to download it instead of displaying.

I already defined mime type in IIS (for entire server — "image/svg+xml") and restarted IIS. Same effect as before.

Question: what should I do more?

Update

WireShark won't work (it is in documentation), I tried also RawCap, but it cannot trace my connection (odd), luckily Fiddler worked:

From client:

GET http://127.0.0.1:1731/svg/document_edit.svg HTTP/1.1
Host: 127.0.0.1:1731
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:10.0.1) Gecko/20100101 Firefox/10.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive

Answer from server:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 16 Feb 2012 11:14:38 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: application/octet-stream
Content-Length: 87924
Connection: Close

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:

*** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***

For the record, here is useful Q&A for Fiddler:
https://stackoverflow.com/questions/826134/how-to-display-localhost-traffic-in-fiddler-while-debugging-an-asp-net-applicati

Best Answer

From your Fiddler trace it appears that you're serving your pages using the built-in Visual Studio web server:

Server: ASP.NET Development Server/10.0.0.0

If this was being served by IIS7 then we'd see:

Server: Microsoft-IIS/7.5

The built-in Visual Studio web server only has a limited set of mime-types it can serve and has no knowledge of mime types you set for IIS7. I wrote up an answer to a similar problem on Stack Overflow a while back:

Setting MIME types using the ASP.NET Development Server

The built-in server is serving your .svg file as:

Content-Type: application/octet-stream

This is probably what's causing the browser to prompt to download.

In Visual Studio check that you're using IIS Express by opening your site's project properties and selecting the "Web" tab from the vertical tab list:

enter image description here

If you don't have IIS 7.5 Express installed you can get it from here:

http://www.microsoft.com/download/en/details.aspx?id=1038

You will need Visual Studio 2010 Service Pack 1 to take full advantage:

http://support.microsoft.com/kb/983509

IIS Express support

Visual Studio 2010 SP1 enables you to use the Internet Information Services (IIS) 7.5 Express as the local hosting server for the website and Web Application Projects.

Note IIS 7.5 Express is not included in SP1, and you must download it separately. For more information, visit the following blog: http://weblogs.asp.net/scottgu/archive/2011/01/03/vs-2010-sp1-beta-and-iis-developer-express.aspx

When you've done that you can add the .svg mime type to your application's web.config file:

<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      </staticContent>
   </system.webServer>
</configuration>
Related Topic