SVG feComposite improvements #2353
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Feb 15, 2021
|
@chrisdavidmills @Ryuno-Ki This is ready for review. |
chrisdavidmills
approved these changes
Feb 16, 2021
|
Hrm, I just decided to get this merged. Any further improvements can come later. Thanks for all your investigation on this @hamishwillee ! |
|
Dang. I just finished work :-) |
Ryuno-Ki
reviewed
Feb 16, 2021
| <p><code>BackgroundImage</code> is not supported as a filter source in modern browsers (see the <a href="/en-US/docs/Web/SVG/Element/feComposite#browser_compatibility">feComposite compatibility table</a>). We therefore need to import one of the images to blend inside the filter itself, using an <code><feImage></code> element.</p> | ||
|
|
||
| <div class="notecard note"> | ||
| <h4>Note</h4> |
There was a problem hiding this comment.
Nitpick: I think, we intend by two spaces.
Ryuno-Ki
reviewed
Feb 16, 2021
| @@ -9,19 +9,57 @@ | |||
| --- | |||
| <div>{{SVGRef}}</div> | |||
|
|
|||
| <p>The <strong><code><feComposite></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: <code>over</code><em>, </em><code>in</code><em>, </em><code>atop</code><em>, </em><code>out</code><em>, </em><code>xor</code>, and <code>lighter</code>. Additionally, a component-wise <code>arithmetic</code> operation (with the result clamped between [0..1]) can be applied.</p> | |||
| <p>The <strong><code><feComposite></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: <code>over</code>, <code>in</code>, <code>atop</code><em>, <code>out</code>, <code>xor</code>, <code>lighter</code>, or <code>arithmetic</code>.</p> | |||
There was a problem hiding this comment.
I think, the <em> element is misplaced here.
Ryuno-Ki
reviewed
Feb 16, 2021
| <th>Description</th> | ||
| </tr> | ||
| <tr> | ||
| <td><p>over <img src="operation_over.png" title="over operator" width="300px"></p></td> |
There was a problem hiding this comment.
Missing alt attribute (perhaps rename the title for it?)
Ryuno-Ki
reviewed
Feb 16, 2021
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td><p>in <img src="operation_in.png" title="in operator"></p></td> |
Ryuno-Ki
reviewed
Feb 16, 2021
| <td>The parts of the source graphic defined by the <code>in</code> attribute that overlap the destination graphic defined in the <code>in2</code> attribute, replace the destination graphic.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><p>over <img src="operation_out.png" title="out operator"> </p></td> |
Ryuno-Ki
reviewed
Feb 16, 2021
| <td>The parts of the source graphic defined by the <code>in</code> attribute that fall outside the destination graphic defined in the <code>in2</code> attribute, are displayed.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><p>atop <img src="operation_atop.png" title="atop operator"></p></td> |
Ryuno-Ki
reviewed
Feb 16, 2021
| <td>The parts of the source graphic defined in the <code>in</code> attribute, which overlap the destination graphic defined in the <code>in2</code> attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><p>xor <img src="operation_xor.png" title="xor operator"></p></td> |
Ryuno-Ki
reviewed
Feb 16, 2021
| <td>The non-overlapping regions of the source graphic defined in the <code>in</code> attribute and the destination graphic defined in the <code>in2</code> attribute are combined.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><p>lighter <img src="operation_lighter.png" title="lighter operator"> </p></td> |
Ryuno-Ki
reviewed
Feb 16, 2021
| <td>The sum of the source graphic defined in the <code>in</code> attribute and the destination graphic defined in the <code>in2</code> attribute is displayed.</td> | ||
| </tr> | ||
| <tr> | ||
| <td><p>arithmetic <img src="operation_arithmetic.png" title="arithmetic operator"></p></td> |
Ryuno-Ki
reviewed
Feb 16, 2021
|
|
||
| <p>where:</p> | ||
| <pre class="brush: plain">result = k1*i1*i2 + k2*i1 + k3*i2 + k4</pre> |
There was a problem hiding this comment.
I think we had some MathML elsewhere. Might be more apt here.
Ryuno-Ki
reviewed
Feb 16, 2021
| <p>where:</p> | ||
| <ul> | ||
| <li><code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to {{SVGAttr("in")}} and {{SVGAttr("in2")}} respectively</li> | ||
| <li>{{SVGAttr("k1")}},{{SVGAttr("k2")}},{{SVGAttr("k3")}},and {{SVGAttr("k4")}} indicate the values of the attributes with the same name.</li> |
There was a problem hiding this comment.
Missing spaces after comma.
Ryuno-Ki
reviewed
Feb 16, 2021
| <li><a href="/en-US/docs/Web/SVG/Attribute#Filter_primitive_attributes">Filter primitive attributes</a> »</li> | ||
| <li><a href="/en-US/docs/Web/SVG/Attribute#core_attributes">Core attributes</a> »</li> | ||
| <li><a href="/en-US/docs/Web/SVG/Attribute#presentation_attributes">Presentation attributes</a> »</li> | ||
| <li><a href="/en-US/docs/Web/SVG/Attribute#filter_primitive_attributes">Filter primitive attributes</a> »</li> |
There was a problem hiding this comment.
Shouldn't the opening » go here?
Ryuno-Ki
reviewed
Feb 16, 2021
|
|
||
| <div class="notecard note"> | ||
| <h4>Note</h4> | ||
| <p><code>BackgroundImage</code> cannot be used as a compositing source on modern browsers, so we can't define a filter that composites using whatever pixels happen to be under the filter as one of the sources. The approach above is a <a href="/en-US/docs/Web/SVG/Attribute/in#workaround_for_backgroundimage">Workaround because we can't use <code>BackgroundImage</code></a>.</p> |
There was a problem hiding this comment.
I feel, like „Workaround” should be lowercase here.
|
@hamishwillee I found some minor stylistic nitpicks. Are you fine with me filling a PR on addressing them? |
nschonni
reviewed
Feb 17, 2021
| </filter> | ||
| <filter id="imageLighter"> | ||
| <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10px" y="10px" width="160px" /> | ||
| <feComposite in2="SourceGraphic" operator="lighter"/> |
There was a problem hiding this comment.
@sideshowbarker validator is flagging this. Should I file upstream or is this a bug in the docs?
There was a problem hiding this comment.
<feComposite in2="SourceGraphic" operator="lighter"/>@sideshowbarker validator is flagging this. Should I file upstream or is this a bug in the docs?
That was a conformance bug in the checker (thanks for the heads-up).
I fixed it just now in validator/validator@970b6a5
sideshowbarker
added a commit
to validator/validator
that referenced
this pull request
Feb 17, 2021
Ryuno-Ki
added a commit
to Ryuno-Ki/content
that referenced
this pull request
Feb 20, 2021
sideshowbarker
pushed a commit
that referenced
this pull request
May 26, 2021
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This attempts to address some of the issues pointed out in #1450
The example doesn't work because it depends on
BackgroundImagesource. This is not supported by any of the modern browsers (working on getting that into the BCD. There is a workaround to this problem, but the document doesn't explain what the problem is. Further, that workaround also works-around a bug in Firefox that it can't use an FeImage "partial" as a source - ie you have to pull in a remote URL you can't define a shape and reference that. All very ugly.Anyway, this does two things.
Appreciate some review. I know little about SVG other than this :-)