title: How to serve SVG using C# so that it will render as a CSS background image
body: <p>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:</p>
  
  <pre><code>return Content(svgContent, "text/xml; charset=utf-8");
  </code></pre>
  
  <p>In this case <code>svgContent</code> 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 <code>background-image</code> 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.</p>
  
  <p>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.</p>
  
  <p><strong>Original response headers</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p>Date: Thu, 23 Jan 2014 11:38:38 GMT</p>
  
  <p><strong>Scripted response headers</strong></p>
  
  <pre><code>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
  </code></pre>