This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The diffuseConstant attribute represents the kd value in the Phong lighting model. In SVG, this can be any non-negative number.
It's used to determine the final RGB value of a given pixel. The brighter the lighting-color, the smaller this number should be.
You can use this attribute with the following SVG elements:
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic" diffuseConstant="1">
<fePointLight x="60" y="60" z="20" />
</feDiffuseLighting>
</filter>
<filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic" diffuseConstant="2">
<fePointLight x="60" y="60" z="20" />
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="200" height="200" filter="url(#diffuseLighting1)" />
<rect
x="220"
y="0"
width="200"
height="200"
filter="url(#diffuseLighting2)" />
</svg>
| Value | <number> |
|---|---|
| Default value | 1 |
| Animatable | Yes |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
diffuseConstant |
5 | 79 | 3 | 15 | 6 | 18 | 4 | 14 | 6 | 1.0 | 4.4 | 6 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/diffuseConstant