Image to grayscale (SVG) issue

Question

Been trying to convert an image to grayscale and back to normal on hover - looking at Convert an image to grayscale in HTML/CSS

Everything is working fine in IE for the normal filter usage, however the SVG method in Firefox isn't going so well. My pages all live in the root of the site, then the stylesheet in /SiteStyles/Styles.css in which I call .homeCaseStudyImage img {filter:url(filters.svg#grayscale);

My filters.svg also lives within the /SiteStyles directory. Which looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>

I know this works for others so I'm guessing it's something to do with either my folder structure or possibly not referencing something to do with SVG?

Any help is appreciated

Answer 1

Make sure that your server is configured to serve .svg files using the SVG MIME type image/svg+xml. Firefox will ignore SVG files that are not served with the correct MIME type.