How to serve SVG using C# so that it will render as a CSS background image

Question

I have a server side script that generates an SVG output. I'm using MVC3 and in the RenderSVG method I return the content of the SVG like so:

return Content(svgContent, "text/xml; charset=utf-8");

In this case svgContent is simply the contents of an SVG file. If I navigate to my RenderSVG method directly, it renders my image as expected. However if I set the same URL as the background-image property of a CSS tag is doesn't render. I am using the latest version of Chrome and can confirm that normal SVG files render normally as a background image. But this server side version does not.

Any ideas what I'm doing wrong? Here are my response headers for the original image and the server side version. The content of the image is identical in each case.

Original response headers

HTTP/1.1 304 Not Modified
Last-Modified: Mon, 23 Sep 2013 04:56:16 GMT
Accept-Ranges: bytes
ETag: "018f63b19b8ce1:0"
Server: Microsoft-IIS/7.5
X-Powered-By: ASP.NET

Date: Thu, 23 Jan 2014 11:38:38 GMT

Scripted response headers

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/xml; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 4.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 23 Jan 2014 11:39:29 GMT
Content-Length: 490

Answer 1

try using "image/svg+xml" as mime type for the svg.

return Content(svgContent, "image/svg+xml; charset=utf-8");

( see http://www.w3.org/TR/SVG11/mimereg.html )