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

Solution 1:

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:

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>

Solution 2:

As mentioned above, Cassini ignores these settings in web.config so one has to use IIS Express instead (at VS project settings) https://stackoverflow.com/questions/5924647/setting-mime-types-using-the-asp-net-development-server

To get more info on how to configure MIME types using the admin UI or using web.config for IIS or IIS Express see: http://4rapiddev.com/tips-and-tricks/add-mime-type-flv-mp4-in-iis-for-a-website-or-global/ and http://4rapiddev.com/tips-and-tricks/add-mime-type-flv-mp4-to-web-config-in-iis-7/

---

Solution 3:

I've used Kev answer, by:

1. Installing IIS 8.0 Express from Web Platform Installer
2. Changing project's properties to use IIS Express and creating Virtual Directory for it
3. Adding in web.config's configuration → system.webServer

<staticContent>
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>

---

Solution 4:

My workaround for this was to create my own httphandler locally which overwrote the content-type for svg.

public class SvgHandler : IHttpHandler
{

    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/svg+xml";
        context.Response.BinaryWrite(File.ReadAllBytes(context.Request.PhysicalPath));
        context.Response.End();
    }
}

and in web.config i added:

<httpHandlers>
  <add verb="*" path="*.svg" type="SvgHandler" />
</httpHandlers>

with this solution you don't have to use IIS express, you can just use the regular development server in visual studio 2010