diff --git a/files/en-us/web/css/filter-function/invert/index.md b/files/en-us/web/css/filter-function/invert/index.md
index 8135982cf9ff561..49664f83793d243 100644
--- a/files/en-us/web/css/filter-function/invert/index.md
+++ b/files/en-us/web/css/filter-function/invert/index.md
@@ -43,31 +43,132 @@ filter: invert(1);
## Syntax
```css
-invert(amount)
+/* No inversion */
+invert(0)
+
+/* Complete inversion */
+invert()
+invert(1)
+invert(100%)
+
+/* 60% inversion */
+invert(.6)
+invert(60%)
```
### Parameters
-- `amount` {{Optional_Inline}}
- - : The amount of the conversion, specified as a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is `0`. The default value is `1`.
+- {{cssxref("<number>")}} or {{cssxref("<percentage>")}} {{Optional_Inline}}
+ - : Specifies the amount of the conversion. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for {{Glossary("interpolation")}} is `0`. The default value is `1`.
## Formal syntax
{{CSSSyntax}}
+## SVG filter
+
+The SVG {{SVGElement("feComponentTransfer")}} filter element can also be used to invert content by creating equivalent inversion on nested {{SVGElement("feFuncR")}}, {{SVGElement("feFuncG")}}, and {{SVGElement("feFuncB")}} table elements. We set the same `tableValue` for the red, green, and blue filter primitives to the same value, then we can reference the SVG effect by the ID of the {{SVGElement("filter")}}:
+
+```html
+
+```
+
+The following declarations produce the same effect:
+
+```css
+filter: invert(0.9);
+filter: invert(90%);
+filter: url("#invert90"); /* with embedded SVG */
+filter: url("fileName.svg#invert90"); /* external SVG */
+```
+
## Examples
-### Examples of correct values for invert()
+This example shows three images for comparison: an image with an `invert()` filter function applied, an image with the equivalent SVG function applied, and the original image:
+
+### SVG
+
+We create an SVG filter that inverts the content on which it is applied by 70%:
+
+```html
+
+```
+
+### CSS
+
+We include CSS that will invert elements based on their `filter` or `svgFilter` class:
```css
-invert(0) /* No effect */
-invert(.6) /* 60% inversion */
+.filter {
+ filter: invert(70%);
+}
-invert() /* Completely inverted */
-invert(1)
-invert(100%)
+.svgFilter {
+ filter: url("#invert");
+}
```
+```html hidden
+
+