CSS3 filter working on localhost but not on remote host


I'm currently facing a problem I don't know how to solve. While applying a CSS3 grayscale filter to some images, it works on my localhost, but on the live site the images appear white (ie. are invisible).

Relevant CSS:

.preview .preview-thumb {
  width: 200px;
  height: 150px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale);
  filter: gray;

.preview:hover .preview-thumb {
  -webkit-box-shadow: 0 0 3px 3px gray;
  -moz-box-shadow: 0 0 3px 3px gray;
  box-shadow: 0 0 3px 3px gray;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none; 

Relevant HTML:

<div class="preview-container" data-category-id="3">
  <div class="preview">
    <a href="project.php?id=3">
      <img class="preview-thumb" src="projects/architectuur/Masterproject Wilsele/grote maquette.jpg"/>
    <span class="preview-name">Masterproject Wilsele</span>

Relevant directory structure:


Correct output on localhost: correct output Incorrect output on remote host (live site): incorrect output

Both screenshots were made using the same browser (Firefox 33.0 on Ubuntu 14.04). Everything works fine when using Chrome (Version 38.0.2125.104 (64-bit) on Ubuntu 14.04), so my guessing is that the problem originates from the url(grayscale.svg#greyscale) hack.

Any ideas on how to solve this? The SVG file I'm using is downloaded from this site.

Problem courtesy of: Tom Knapen


Whenever people have a "works from localhost but not from remote server" problem with SVG files, it almost always turns out to be that your web server is not returning the right MIME type for your SVG file.

Make sure the web server is returning your grayscale.svg file with a Content-type of "image/svg+xml". The simplest way to check is by using the "Net" tab in your browser dev tools.


After looking at your actual site I discovered this warning in the console:

Content Security Policy: The page's settings blocked the loading of a resource at
          http://corporaal.be/css/grayscale.svg ("default-src 'none'").

You need to modify your Content Security Policy header to allow the SVG to be loaded. Try changing default-src to 'self'.

Solution courtesy of: Paul LeBeau


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.