How to Fix IIS MIME Type and Visual Studio Debugging for SVG File Rendering Issues

When working with SVG files in ASP.NET applications during Visual Studio debugging sessions, you might encounter this behavior:

<!-- Works in static HTML -->
<img src="image.svg" alt="SVG should appear" />

<!-- Fails in ASPX page -->
<img src="image.svg" alt="Broken image shown" />

Fiddler reveals the core issue - the Development Server sends SVG files with incorrect MIME type:

HTTP/1.1 200 OK
Content-Type: application/octet-stream  <-- Wrong MIME type

Instead of the required image/svg+xml, Visual Studio's built-in web server defaults to generic binary format.

1. IIS Configuration (For Production)

Ensure proper MIME type mapping in IIS Manager:

Extensions: .svg
MIME Type: image/svg+xml

2. Visual Studio Development Server Fix

Add this to your Web.config to override the default behavior:

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

3. Alternative Solution Using IIS Express

Modify applicationhost.config (typically in Documents\IISExpress\config):

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

Always verify with browser developer tools:

1. Check Network tab for correct Content-Type header
2. Ensure no caching issues (use Ctrl+F5)
3. Validate SVG file syntax at https://validator.w3.org

For dynamic SVG generation:

protected void Page_Load(object sender, EventArgs e)
{
    Response.ContentType = "image/svg+xml";
    Response.Write("<svg xmlns='http://www.w3.org/2000/svg'>...</svg>");
    Response.End();
}

When working with SVG files in ASP.NET projects, developers often encounter this frustrating scenario:

<img src="document_edit.svg" alt="SVG not displaying" />

The image shows fine when testing as static HTML, but fails when running through Visual Studio's development server. Fiddler reveals the core issue:

Content-Type: application/octet-stream

The ASP.NET Development Server (Cassini) and IIS Express don't automatically recognize SVG files, even when:

MIME types are properly configured in IIS Manager
The registry contains correct SVG MIME type entries
The web.config includes staticContent mappings

For IIS Express (Visual Studio 2015+)

Add this to your web.config:

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

For Classic ASP.NET Development Server

Create an HTTP handler in web.config:

<system.web>
  <httpHandlers>
    <add verb="*" path="*.svg" 
         type="System.Web.StaticFileHandler" />
  </httpHandlers>
</system.web>

If SVGs still won't display, check these potential culprits:

// Sample C# code to verify MIME type in Application_Start
var svgMime = MimeMapping.GetMimeMapping("test.svg");
Debug.WriteLine(svgMime); // Should output "image/svg+xml"

For IIS 10 specific cases, you might need to modify the applicationHost.config:

<location path="Default Web Site">
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</location>

As a temporary workaround, you can use data URIs:

<img src="data:image/svg+xml;base64,[base64-encoded-svg]" 
     alt="Embedded SVG" />

Or serve the SVG through a handler:

public class SvgHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/svg+xml";
        context.Response.WriteFile(context.Request.PhysicalPath);
    }
}

ServerDevWorker