How to fix the SVG 404 error when using Umbraco and Azure Blob Storage

A bit of background

I was working on a site which needed to use SVGs.

I had created a media picker to choose an SVG from a folder in the Umbraco backoffice.

The site I was working on, had the media stored in azure blob storage.

It was running Umbraco 7.13.2 so SVGs were supported but it wasn't loading my SVGs.

The strange thing was, if I deleted the web.config file from the media folder, the SVGs would load.

This was the web.config file in the media folder:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <clear />
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

I reached out on the Umbraco Forum and the Community Slack channel and Jeavon from Crumpled Dog gave me the answer.

The Solution

The solution was to add this line to the web.config file:

<add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />

But why?

I already had this set for the media location in my main web.config file so why did I need to set it again in this one?

The reason was because in the media web.config file, it was clearing all of the handlers first and then adding the StaticFile one. Meaning that any handlers that had been set in the main web.config file would be cleared first.

So the full web.config file in the media folder should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <handlers>
            <clear />
            <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
            <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
        </handlers>
    </system.webServer>
</configuration>

Thanks to Jeavon for giving me the answer and for helping me work out why it worked if I deleted the web.config file.