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);
}
}