Home/ Questions/Q 8947223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:42:05+00:00

Interesting question for someone. I’m trying to apply an SVG filter to an image

  • 0

Interesting question for someone. I’m trying to apply an SVG filter to an image loaded in the page using the following markup: 

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style type="text/css">
  #exampleImage { 
    filter: url("#grayscale");
  }
  </style>
</head>
<body>
  <img id="exampleImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" />
  <svg 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>
</body>
</html>

This works fine in Firefox – the image appears grayscale – but not in webkit (Chrome or Safari on Mac). From what I’ve been reading, this should work. Can you see anything I’m missing?

Thanks!

  • Ben
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s your example made in a way that works in all browsers that support svg filters:

    <!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <style type="text/css">
  #exampleImage { 
    filter: url("#grayscale");
  }
  </style>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale" x="0" y="0" width="1" height="1">
      <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>
    <image id="exampleImage" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" width="100%" height="100%"/>
  </svg>
</body>
</html>

    Safari started supporting filters in version 6, see table of support for all browsers.

    • 0