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:
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:
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
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
Solution 4
I've used Kev answer, by:
- Installing IIS 8.0 Express from Web Platform Installer
- Changing project's properties to use IIS Express and creating Virtual Directory for it
- Adding in web.config's configuration → system.webServer
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
Solution 5
I am running IIS7, and was able to fix this by right-clicking on the server in IIS and choosing properties. Then I clicked on the MIME Types... button. I then clicked New. For the extension I typed in .svg. For the MIME Type I typed in image/svg+xml. I then saved is all and did an iisreset from the command prompt. Worked great.
Related videos on Youtube
greenoldman
Updated on September 18, 2022Comments
-
greenoldman over 1 year
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
-
Ov's Pianist over 12 yearsThink you might get better answers for this on SO. In short, assuming ASPX is already working, you'd need to emit SVG as the MIME type from the ASPX page in order for the browser to believe it's an SVG file. You are, presumably, trying to dynamically emit SVG from the page? If so, AFAIK if it works as a single page, it'll work in an IMG entry.
-
greenoldman over 12 years@TristanK, aspx is not emitting "SVG as the MIME type", it simply contains
<img src...
as shown above, aspx is "translated" to full html page, but the sending entire content (html, and then svg) is done by IIS. -
Ov's Pianist over 12 yearsI still don't understand what you're describing, but I think this is a development question, so would be better off asked on StackOverflow.
-
Kev over 12 yearsGrab a copy of Fiddler then trace the two different requests. That might give you some clues as to why a direct request for the image is behaving differently in each of these cases. The clues will most likely be in the headers returned. Without this data all we can do is but guess at what responses your server is returning.
-
Philip over 12 years@macias As Kev said, you're going to need to trace the traffic. Fiddler or plain old Wireshark should be able to pick it up.
-
greenoldman over 12 years@Kev, when you access local file (directly), there is no traffic, so I cannot trace it. For localhost, I updated the question.
-
-
greenoldman over 12 yearsMany thanks. In my case it went somewhat differently -- to switch to IIS (I have ISS, not ISSExpress) I had to run VS in admin mode, after that it was all -- I didn't define svg in web.config because I defined it already in IIS.
-
voretaq7 almost 12 yearsAre you asking this as a new question, or rhetorically? If the former, please ask a new question with full details. If the latter, this should probably be a comment - as it stands it's a very poor answer (see here for why)
-
George Birbilis almost 12 yearsrevised with better links
-
voretaq7 almost 12 yearsmuch better :-)
-
Jarrod Mosen about 9 yearsIt's pretty gross that this kind of thing has to happen...