Skip to content

Commit

Permalink
Mention that SVG FE elements use linearRGB by default (#38068)
Browse files Browse the repository at this point in the history
* Mention that SVG FE elements use linearRGB by default

* Link color space
  • Loading branch information
Josh-Cena authored Feb 10, 2025
1 parent f1f6378 commit 332c437
Show file tree
Hide file tree
Showing 16 changed files with 32 additions and 0 deletions.
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/feblend/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feBlend

The **`<feBlend>`** [SVG](/en-US/docs/Web/SVG) filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers. The mode is defined by the {{SVGAttr("mode")}} attribute.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fecolormatrix/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ A' | 0 0 0 1 0 |

In it, every new value is exactly 1 times its old value, with nothing else added. It is recommended to start manipulating the matrix from here.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fecomponenttransfer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ The **`<feComponentTransfer>`** [SVG](/en-US/docs/Web/SVG) filter primitive perf

The calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, and {{SVGElement("feFuncA")}} return. If more than one of the same element is provided, the last one specified is used, and if no element is supplied to modify one of the channels, the effect is the same is if an identity transformation had been given for that channel.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fecomposite/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feComposite

The **`<feComposite>`** [SVG](/en-US/docs/Web/SVG) filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: `over`, `in`, `atop`, `out`, `xor`, `lighter`, or `arithmetic`.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

The table below shows each of these operations using an image of the MDN logo composited with a red circle:

<table class="no-markdown">
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/feconvolvematrix/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ Let's focus on the color value at the second row and second column of the image
3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)
```

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fediffuselighting/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ The **`<feDiffuseLighting>`** [SVG](/en-US/docs/Web/SVG) filter primitive lights

The light map produced by this filter primitive can be combined with a texture image using the multiply term of the `arithmetic` operator of the {{SVGElement("feComposite")}} filter primitive. Multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fedisplacementmap/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ The formula for the transformation looks like this:

where `P(x,y)` is the input image, {{SVGAttr("in")}}, and `P'(x,y)` is the destination. `XC(x,y)` and `YC(x,y)` are the component values of the channel designated by {{SVGAttr("xChannelSelector")}} and {{SVGAttr("yChannelSelector")}}.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fedistantlight/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feDistantLight

The **`<feDistantLight>`** [SVG](/en-US/docs/Web/SVG) filter primitive defines a distant light source that can be used within a lighting filter primitive: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fedropshadow/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ The **`<feDropShadow>`** [SVG](/en-US/docs/Web/SVG) filter primitive creates a d
> [!NOTE]
> The drop shadow color and opacity can be changed by using the {{SVGAttr('flood-color')}} and {{SVGAttr('flood-opacity')}} presentation attributes.
Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Example

```css hidden
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fegaussianblur/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feGaussianBlur

The **`<feGaussianBlur>`** [SVG](/en-US/docs/Web/SVG) filter primitive blurs the input image by the amount specified in {{SVGAttr("stdDeviation")}}, which defines the bell-curve.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/femerge/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feMerge

The **`<feMerge>`** [SVG](/en-US/docs/Web/SVG) element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the {{ SVGAttr("result") }} attribute and then accessing it in a {{ SVGElement("feMergeNode") }} child.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/femorphology/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feMorphology

The **`<feMorphology>`** [SVG](/en-US/docs/Web/SVG) filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fepointlight/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.fePointLight

The **`<fePointLight>`** [SVG](/en-US/docs/Web/SVG) filter primitive defines a light source which allows to create a point light effect. It that can be used within a lighting filter primitive: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fespecularlighting/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ The **`<feSpecularLighting>`** [SVG](/en-US/docs/Web/SVG) filter primitive light

This filter primitive produces an image which contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the `add` term of the arithmetic {{SVGElement("feComposite")}} method. Multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/fespotlight/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ browser-compat: svg.elements.feSpotLight
The **`<feSpotLight>`** [SVG](/en-US/docs/Web/SVG) filter primitive defines a light source that can be used to create a spotlight effect.
It is used within a lighting filter primitive: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/svg/element/feturbulence/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ browser-compat: svg.elements.feTurbulence

The **`<feTurbulence>`** [SVG](/en-US/docs/Web/SVG) filter primitive creates an image using the [Perlin turbulence function](https://en.wikipedia.org/wiki/Perlin_noise). It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.

Like other filter primitives, it handles color components in the `linearRGB` {{glossary("color space")}} by default. You can use {{svgattr("color-interpolation-filters")}} to use `sRGB` instead.

## Usage context

{{svginfo}}
Expand Down

0 comments on commit 332c437

Please sign in to comment.