SVG graphics not working in Windows Server/IIS 7.5

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

The only reason I put IIS 7.5 in the post is because that is the example I provide here, but the instructions are similar on older versions of IIS, just find the MIME Types and you should be able to use the same values.

So most of my new sites have been using responsive frameworks and other technologies to help in serving light weight content and crisp clean graphics to my web users. Up until now, most of the SVG’s I have been deploying in websites have been running on a linux machine and I have never had any problems.

Today I deployed my first website using lots of SVG graphics to a Windows Server running IIS 7.5. When I launched the site, my SVG images failed to load. I thought I must just need to change the path to the file to point at the root of the website. In Visual Studio/ASP.NET that requires me to add a tilde ‘~’ sign to the front of the SRC value. But that didn’t work.

Finally I used chrome to inspect the element, then viewed the source, checked to make sure the file was on the server and all was good. Finally I clicked on the path inside the view source window and I got a 404 error!

Haha!

IIS is not even serving the files. A quick trip to the Microsoft Management Console (Server Manager) / Roles / Web Server / IIS Manager and I clicked on my site in IIS. From here I am presented with the view below. Notice how I have the MIME Types icon highlighted, that is where we want to go.

Internet Information Server Site Features View

 

Now, click on the MIME Types icon and you will get the following screen

where I have took a snapshot just after right clicking in the white space to

the right of all the MIME types.

MIME Types Features View

 

Go ahead and click (Add) and then fill out the dialogue box as I have below:

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

Add MIME Types Dialogue box

Click OK! and try your site again. This should rectify the problem! If not, well then this was never the solution in the first place. One thing I might note is to make sure that you are adding this to the correct IIS site, because if you accidently add it to the wrong site or the default site, it won’t work as these are site specific properties. Also if you plan to use svg graphics on many sites in this server, than you should think about not just adding the mime types as the individual website level, but instead let ask of your sites inherit from the top level localhost (home) Features view.

Don’t let the web fool you, SVG’s should absolutely be available for use on all websites, they are not just for IPhones, High Res Mac monitors etc.. And I have no idea why IIS does not add them as default. This should be changed Microsoft!!

 

Leave a Reply

You must be logged in to post a comment.