Enable GZip compression for SVG in Azure Web Sites?

Question

I'm trying to enable GZip compress for SVG in an Azure Web Site using web.config transforms without success. Here is what my transform looks like:

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <system.webServer>
    <httpCompression>
      <staticTypes>
        <add mimeType="image/svg+xml" enabled="true" xdt:Transform="Insert" />
      </staticTypes>
    </httpCompression>
    <staticContent xdt:Transform="Insert">
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
  </system.webServer>
</configuration>

This should both add the mime type for SVG, which Azure doesn't seem to have, and then enable compression. I've verified the mime type addition works fine, but upon publishing I get an error for the compression elements:

No element in the source document matches '/configuration/system.webServer/httpCompression/staticTypes'

Removing the compression from the transform and adding it directly to my web.config file removes the error, but I still don't see the compression in the HTTP headers. Here are the response headers:

Accept-Ranges:bytes
Content-Length:23265
Content-Type:image/svg+xml
Date:Mon, 10 Jun 2013 17:19:37 GMT
ETag:"c4e9ec93d765ce1:0"
Last-Modified:Mon, 10 Jun 2013 12:39:41 GMT
Server:Microsoft-IIS/8.0
X-Powered-By:ASP.NET
X-Powered-By:ARR/2.5
X-Powered-By:ASP.NET

Answer 1

Here is how you can enable it in your web.config:

<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      </staticContent>
      <httpCompression>
         <staticTypes>
           <remove mimeType="*/*" />
           <add mimeType="image/svg+xml" enabled="true" />
           <add mimeType="*/*" enabled="false" />
         </staticTypes>
      </httpCompression>
   </system.webServer>
</configuration>

The key line is the removal of the catch-all (and later re-add). If you don't have that, then the svg line basically gets ignored since the catch-all is inherited from applicationhost.config, and catches all before it reaches svg line.

Answer 2

Unfortunately it isn't possible to use built-in http compression on Azure Websites for image/xml+svg mime types. You have to change some IIS settings to do that which is possible if you're using Azure Web Roles.

I didn't want to go through that hassle however so I just made a controller in MVC to handle .svg files.

[AttributeRouting.RoutePrefix("static")]
public class ContentController : Controller
{
    [GET(@"fonts/{fileName:regex(^[\w-\.]+\.svg$)}")]
    [Compress, OutputCache(
        Duration = 3600 * 24 * 30,
        Location = OutputCacheLocation.Any,
        VaryByContentEncoding = "gzip;deflate",
        VaryByParam = "fileName")]
    public ActionResult SvgFont(string fileName)
    {
        var path = Server.MapPath("~/Content/fonts/" + fileName);
        if (!System.IO.File.Exists(path)) return HttpNotFound();
        return File(path, "image/svg+xml");
    }
}

public class CompressAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.HttpContext.CompressResult();
    }
}

public static class HttpContextExtensions
{
    public static bool CompressResult(this HttpContextBase context)
    {
        var request = context.Request;
        var response = context.Response;
        if (request == null || response == null) return false;
        var filter = response.Filter;
        if (filter is GZipStream || filter is DeflateStream) return false;
        var acceptEncoding = (request.Headers["Accept-Encoding"] ?? string.Empty).ToLowerInvariant();
        if (acceptEncoding.Contains("gzip"))
        {
            response.Filter = new GZipStream(filter, CompressionMode.Compress);
            response.AddHeader("Content-Encoding", "gzip");
            response.AppendHeader("Vary", "Content-Encoding");
            return true;
        }
        if (acceptEncoding.Contains("deflate"))
        {
            response.Filter = new DeflateStream(filter, CompressionMode.Compress);
            response.AddHeader("Content-Encoding", "deflate");
            response.AppendHeader("Vary", "Content-Encoding");
            return true;
        }
        return false;
    }
}

You will also need to add this to your Web.config file so that MVC will handle routes with a .svg extension

<system.webServer>
  <handlers>
    <add name="StaticMvcHandler" path="static/fonts/*.svg" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

Answer 3

I have the following configuration entries for an Azure Web-Site:

    <system.webServer>
       <urlCompression doStaticCompression="true" doDynamicCompression="true" />
    </system.webServer>

and

  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  <!-- Scalable Vector Graphics iPhone, iPad -->
  <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />

I have added the .svgz extension as well (for compressed svg).

Answer 4

The above solution worked for me but I first had to remove the file extension. After that I got the results I was looking for.

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