Click here to Skip to main content
Click here to Skip to main content

Viewing SVG and other HTML5 content when debugging in Visual Studio

, 13 Aug 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
The web server that is built into Visual Studio 2010 can't serve all MIME types.

Introduction

When working on modern web applications that use features that are recently supported by browsers such as SVG, you may find that images do not render correctly, or at all in the browser.

Background

When most of use develop and test web applications locally, we use the built-in web server, called ASP.NET Development Server/10.0.0.0. This works fine for testing, and most applications will eventually get deployed to a web server running IIS 7.0 or later.

The Problem

The ASP.NET Development Server is not aware that it should serve SVG with a MIME content-type of image/svg. Instead it uses the generic application/octet-stream. A modern web browser on the other hand will typically either request image/* or explicitly request image/svg+xml. If the response is application/octet-stream, it will ignore the response (tested in IE9, FF14).

The usual way of fixing this is to add this code block to web.config:

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

Unfortunately ASP.NET Development Server is unable to understand this directive.

To workaround this problem, install and use IIS 7.5 Express to serve the content locally. This will require instructing Visual Studio to use IIS instead.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Yvan Rodrigues
President Red Cell Innovation Inc.
Canada Canada
Yvan Rodrigues has 25 years of experience in information systems and software development for the manufacturing sector. He runs Red Cell Innovation Inc./L'innovation de Globules Rouges, a consulting company focusing on efficiency and automation of manufacturing and business processes for small businesses, healthcare, and the public sector. He is a Certified Technician (C.Tech.), a professional designation granted by the Institute of Engineering Technology of Ontario (IETO).
 
Yvan draws on experience at Mabel's Labels Inc. as Manager of Systems and Development, and the University of Waterloo as Information Systems Manager.
 
Yvan supports open-source software. He is a committer for SharpKit (C# to Javascript cross-compiler) and WebIssues (Issue/Ticket Management System), TinyMCE (JavaScript editor), and contributes to MySQL, Ghostscript, iTextSharp, Bacula, FreeBSD, and Xamarin.
 
Yvan's consumer-focused apps can be found in the Windows Store, Apple App Store, and Google Play marketplace.
Follow on   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 13 Aug 2012
Article Copyright 2012 by Yvan Rodrigues
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid