Use CSS filters in svg image tag?

Admin 1
Viewed 600

When using basic CSS filters, I can do something like:

<img src="..." style={{ filter: "blur(5px) ..." }} />

Or:

<img src="..." style="filter: blur(5px)" />

This will work fine. I wish to do this within an SVG <image> tag. I am not sure why the same inline styling never gets applied. There is a filter attribute within the image tag but I believe it only accepts tags like <feGaussianBlur> and other 'primative' filter tags. They do not have the functionality of what I need, ex: grayscale, huechange etc.

How do I make use CSS filters in an <image>?

The specific example is in React.

reactjs svg
1 Answers

The folowing SVG filter is almost the same as the CSS blur(5px) - MDN

<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>



 <svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
   <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
       <feGaussianBlur in="SourceGraphic" stdDeviation="3.5"></feGaussianBlur>
   </filter>
   <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
          filter="url(#svgBlur)" width="212px" height="161px"></image>
</svg>

grayscale()

<svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
         style="filter: grayscale(0.5);" width="212px" height="161px"></image>
</svg>

sepia()

<svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
         style="filter: sepia(80%);" width="212px" height="161px"></image>
</svg>

hue-rotate();

<svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
         style="filter:hue-rotate(0.1turn);" width="212px" height="161px"></image>
</svg>

brightness()

<svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
         style="filter: brightness(50%);" width="212px" height="161px"></image>
</svg>

saturate()

<svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
         style="filter: saturate(200)" width="212px" height="161px"></image>
</svg>

invert()

<svg id="img3" overflow="visible" viewBox="0 0 212 161" color-interpolation-filters="sRGB">
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 
         style="filter: invert(100%);" width="212px" height="161px"></image>
</svg>

You can also use HTML <img> in a SVG <foreignObject>

The SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML. - https://developer.mozilla.org

<svg id="img3" overflow="visible" viewBox="0 0 212 161">
    <foreignObject  x="0" y="0" width="212" height="160">
        <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
             width="212" height="160"
             style="filter: brightness(20%);" />
    </foreignObject>
</svg>

user_82921780
Related