SVG filter: different result depending on browser

Question

I am trying to add a point light effect to an SVG rectangle. The problem is that i got different results depending on the browser I am using. For example in Chrome and Safari i got the following:

How could I get a consistent result using svg filters on different browsers?

*, *:before, *:after {
  box-sizing: border-box;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>



<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="customPointLight">
      <feSpecularLighting result="lightBuffer" specularConstant="1.5"
          specularExponent="80" lighting-color="#fff">
        <fePointLight x="100" y="100" z="80"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="lightBuffer" operator="out"
          k1="0" k2="1" k3="1" k4="0"/>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#customPointLight)"></rect>
  
</svg>

Answer 1

Safari is choosing an incorrect filter resolution automatically, probably because no-one has bothered to update the code for retina displays. You can kick Safari to do "mostly" the right thing by adding filterRes="200" to the filter element because it hasn't dropped support for filterRes yet.

That said, today, the right thing to do cross-browser, is to punt on light sources completely and just use a rectangle filled with a black/white radial gradient imported as a data:URI with feImage (for Firefox & Edge compatibility). A screen blend will add the white high light to the original as I think you were intending. Like so:

svg {
background: red;
}

<svg width="400px" height="200px" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
     <radialGradient id="lightHack">
      <stop offset="35%" stop-color="white"/>
      <stop offset="80%" stop-color="black"/>
    </radialGradient>
    
    <filter id="customPointLight">
      <feSpecularLighting result="lightBuffer" specularConstant="1.5"
          specularExponent="80" lighting-color="#fff">
        <fePointLight x="100" y="100" z="80"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="lightBuffer" operator="out"
          k1="0" k2="1" k3="1" k4="0"/>
    </filter>
    
    <filter id="pointLightHack" x="0%" y="0%" width="100%" height="100%">
       <feImage width="100" height="100" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KDQogIDxkZWZzPg0KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iZXhhbXBsZUdyYWRpZW50Ij4NCiAgICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPg0KICAgICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+DQogICAgPC9yYWRpYWxHcmFkaWVudD4NCiAgPC9kZWZzPg0KICA8Y2lyY2xlIGZpbGw9InVybCgjZXhhbXBsZUdyYWRpZW50KSIgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIi8+DQo8L3N2Zz4="/>
      <feBlend mode="screen" in="SourceGraphic"/>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#customPointLight)"/>
  <rect x="250" y="50" height="100" width="100" fill="blue" filter="url(#pointLightHack)"/>
</svg>

  <!-- SVG source of the base64 encoded feImage -->

  <svg width="100" height="100" viewBox="0 0 100 100"
   xmlns="http://www.w3.org/2000/svg">

  <defs>
    <radialGradient id="exampleGradient">
      <stop offset="40%" stop-color="white"/>
      <stop offset="75%" stop-color="black"/>
    </radialGradient>
  </defs>
  <circle fill="url(#exampleGradient)" cx="50" cy="50" r="50"/>
</svg>

As an aside, you're not using the lighting effect correctly, specular lighting is supposed to add "shiny" highlights, so the proper usage is to composite the result on top of the source. Diffuse lighting is supposed to add "regular" light and it should be multiplied with the original graphic. In neither case should you be using an "out" composite operation - which is punching a transparent hole in your rectangle, as you can see when you add the red background above.

Answer 2

For all filters that use neighboring pixels in their computation, like feSpecularLighting, feGaussianBlur or feConvolveMatrix, the result is influenced by attribute filterRes, which defines the resolution for computing the filter effect. Unlike other attributes, the specification defines no default:

If not provided, then the user agent will use reasonable values to produce a high-quality result on the output device.

That leaves room for alot of differences between UAs.

feSpecularLighting itself has an attribute kernelUnitLength that explicitly references filter resolution:

For some level of consistency (sic!) across display media and user agents, it is necessary that a value be provided for at least one of ‘filterRes’ and ‘kernelUnitLength’.

Answer 3

Solved for now adding a circle with blur primitive which gives a similar effect and seems to be rendered correctly across browsers.

*, *:before, *:after {
  box-sizing: border-box;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" fill="blue""></rect>
  <circle cx="100" cy="100" r="20" fill="#fff" filter="url(#blur)"></circle> 
  
</svg>