40

I'm trying to set a ".svg" image as background-image using css, but it is not working. The url is valid and returns 200 status code and works on ".png" images.

What is the problem?

skeletank
  • 2,880
  • 5
  • 43
  • 75
HasanAboShally
  • 18,459
  • 7
  • 30
  • 34

5 Answers5

74

Your IIS is most likely not configured with SVG as a content type, try adding

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

inside the <system.webServer> scope of your web.config.

This will of course only work if your application is the one serving up the svg. If the svg is not contained inside your application but in a separate directory of the web server, you'll need to add the same mapping to your web server instead inside the "mime-types" tab.

Joachim Isaksson
  • 176,943
  • 25
  • 281
  • 294
  • 18
    If you are adding mime types into your application, it's good practise to remove the type you are adding first: This avoids a conflict if the mime type is already configured on the web server you are deploying to. This sort of issue is common when deploying to different versions of IIS / IISExpress. – uniquelau Dec 15 '14 at 11:29
  • You sir, are a genius. – ShrapNull Sep 06 '18 at 18:56
  • Thanks! I was trying with Drupal And None of the .svg icons are loading. Thanks for this config. It worked as expected! – Harish ST Sep 13 '18 at 05:33
29

Try This - Your App/Website under Default Settings of IIS Manager

Default Site Under IIS Manager

Then "Add" -> { .svg : image/svg+xml }

Vintesh
  • 1,657
  • 1
  • 24
  • 31
16

from web.config

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

or in IIS go to MIME Types and add file name extension:.svg MIME Type: image/svg+xml

Mohammad Farahani
  • 619
  • 7
  • 12
1

In my case, I included all of the mime-types I wanted in the applicationHost.config file (which is usually located at C:\Windows\System32\inetsrv\config) under the <system.webServer> scope, like Joachim Isaksson mentioned. This allows all of my IIS sites to inherit the same mime-types, and gives you one location to change them if something goes wrong.

Community
  • 1
  • 1
Markaius
  • 11
  • 2
  • This solved the issue for me. I tried adding the mimeMap tag to my site's web.config, but it did not work. I tried various other solutions like tweaking the svg file in notepad. But this is the only thing that worked for me. – Pete Sep 12 '19 at 12:45
1

Just in case, if anyone want to use IIS Manager for the same, select 'top node' on 'Connections' tree (typically the name of the machine you're on), and on right side, locate 'MIME Types' in 'IIS' section - double click the same. You should see list of all file types with 'Entry Type' as 'Local'. Add '.svg' type as mentioned by posts above (which amends same file as mentioned by 'Markaius'). This enables to 'inherit' same MIME type for any application on the machine.

Kris
  • 545
  • 7
  • 9