Search code examples
svgsvg-filters

How to auto-brighten an SVG node using SVG only?

I would like to be able to specify some kind of transformation that would, given an arbitrary SVG node remap all of its pixel values to cover the full (0-100% or 0-255) range of intensities while avoiding clipping.

The feComponentTransfer filter with feFuncX linear mapping functions almost offers what I want but seems to lack the ability to refer to the global maximum intensity of the input node, is there some clever way around it ?

Solution

  • There is no "auto-brighten" feature that will do what you want.

    You would have have to do it yourself by reading all the colours yourself with javascript and work out the appropriate brighten/saturate value.

    But as a good-enough approach, a saturate filter with a value of 200% might get something close to what you want.

    svg rect:hover {
  filter: saturate(200%);
}
    <svg>
  <rect width="50%" height="100%" fill="cadetblue"/>
  <rect x="50%" width="50%" height="100%" fill="cornsilk"/>
</svg>