CSS invert function

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
+<svg role="none">
+  <filter id="invert90">
+    <feComponentTransfer>
+      <feFuncR type="table" tableValues="0.1 0" />
+      <feFuncG type="table" tableValues="0.1 0" />
+      <feFuncB type="table" tableValues="0.1 0" />
+    </feComponentTransfer>
+  </filter>
+</svg>
+```
+
+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
+<svg height="0">
+  <filter id="invert">
+    <feComponentTransfer>
+      <feFuncR type="table" tableValues="0.3 0" />
+      <feFuncG type="table" tableValues="0.3 0" />
+      <feFuncB type="table" tableValues="0.3 0" />
+    </feComponentTransfer>
+  </filter>
+</svg>
+```
+
+### 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
+<table cellpadding="5">
+  <thead>
+    <tr>
+      <th><code>invert()</code> filter</th>
+      <th>SVG filter equivalent</th>
+      <th>Original image</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <img
+          class="svgFilter"
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
+      </td>
+      <td>
+        <svg id="svg" height="220" width="220" overflow="visible">
+          <filter id="svgInvert">
+            <feComponentTransfer>
+              <feFuncR type="table" tableValues="0.3 0"/>
+              <feFuncG type="table" tableValues="0.3 0"/>
+              <feFuncB type="table" tableValues="0.3 0"/>
+            </feComponentTransfer>
+          </filter>
+          </filter>
+          <image
+            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+            filter="url('#svgInvert')" />
+        </svg>
+      </td>
+      <td>
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
+          alt="Pride flag" />
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+{{EmbedLiveSample('examples','100%','280')}}
+
 ## Specifications
 
 {{Specifications}}