[edwin-hollen]

[various] Support SVG filters (blur, offset, feMerge)

Fixes flutter/flutter#158592

This PR introduces support for basic SVG filters (feGaussianBlur, feOffset, and feMerge) to the vector_graphics ecosystem. (Alpha mask support has been split out into a separate PR per review feedback.)

Key Features:

• Added parsing, resolution, and encoding of SVG filters including feGaussianBlur, feOffset, and feMerge in vector_graphics_compiler.
• Updated the binary format and vector_graphics_codec to support encoding and decoding paint blurs.
• Updated vector_graphics to render paint blurs using Flutter's ui.ImageFilter.blur.
• Enhanced SourceAlpha filters to preserve opacity variations in gradient stops by mapping gradient colors to black while maintaining their alpha values.

Implementation Details:

• Filter Chaining: Filters are parsed into a directed acyclic graph (DAG) of primitives. The resolver traces these primitives from the filter outputs back to SourceGraphic/SourceAlpha to determine the necessary rendering layers.
• Multi-layer Filter Resolution: Handles multi-layer filters (e.g. from feMerge) by duplicating the target rendering nodes for each layer in the AST.
• Text Filter Resolution: Resolves filters at the TextPositionNode level (rather than leaf TextNodes) to maintain correct text chunk alignment and cursor positioning.
• Nested Filter Propagation: Enhanced nested parent nodes (groups), inner path filters, and text position nodes to correctly inherit and propagate the outer SourceAlpha state down the tree.
• Blur Scaling: Scales the blur standard deviations by the accumulated transform's scale factors at both the group and path/text levels to ensure correct rendering when scaled (since the compiler bakes geometry transforms at compile time, the blur sigmas must also be scaled to match).
• Compiler Optimizer & Tessellator Compatibility:
  • Preserves blurSigmaX/blurSigmaY when TessellationVisitor and PathOps convert PathNodes to VerticesNodes.
  • Prevents MaskingOptimizer, ClippingOptimizer, and OverdrawOptimizer from collapsing or intersecting paths that carry a blur filter (since blurred paint extends beyond geometric path bounds).
• Spec Compliance:
  • Supports both comma and space-separated stdDeviation values.
  • Defaults omitted stdDeviation attributes to 0.0 (as per SVG spec).
  • Automatically resolves default in attributes for feMergeNodes (falling back to the previous sibling primitive's result or SourceGraphic).
  • Preserves original fill/stroke opacity when applying SourceAlpha filters.
  • Handles self-closing <feMerge /> elements.
• Robustness, Performance & Optimizations:
  • Added cycle detection during filter tracing to prevent stack overflow on circular filter references.
  • Skips rendering node recreation for filter layers that do not affect the paint (e.g. plain SourceGraphic branches in a merge).
  • Wrapped current layer state restoration in try-finally blocks inside parent node and text position node visitors to guarantee robust recovery in case of exceptions.
  • Caches blackened gradients in ResolvingVisitor to prevent redundant object allocations for shared SVG gradients.
  • Guarded against setting paint imageFilter when blur standard deviations are 0.0 to avoid unnecessary rendering overhead in Flutter.
  • Defensively clamped blur standard deviations to non-negative values in the rendering listener to prevent crashes when processing malformed SVG files.

Pre-Review Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the AI contribution guidelines and understand my responsibilities, or I am not using AI tools.
• I read the Tree Hygiene page, which explains my responsibilities.
• I read and followed the relevant style guides and ran the auto-formatter.
• I signed the CLA.
• The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
• I linked to at least one issue that this PR fixes in the description above.
• I followed the version and CHANGELOG instructions, using semantic versioning and the repository CHANGELOG style, or I have commented below to indicate which documented exception this PR falls under¹.
• I updated/added any relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or I have commented below to indicate which test exemption this PR falls under¹.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

TAG=agy
CONV=27cb188a-9ad9-4434-8918-8ef71bdba17c

Footnotes

1. Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. ↩ ↩²

[gemini-code-assist]

Code Review

This pull request introduces support for SVG filters, specifically blur and offset, and alpha masks across the vector_graphics, vector_graphics_codec, and vector_graphics_compiler packages. It updates the parser to handle , feGaussianBlur, feOffset, and feMerge elements, adds encoding/decoding for paint blur commands, and implements rendering support via ImageFilter.blur. The review feedback highlights several areas for improvement: handling comma-separated values in stdDeviation, defaulting omitted in attributes on feMergeNode, preserving the original element's opacity when applying isSourceAlpha filters, and implementing cycle detection during recursive filter tracing to prevent stack overflows.

[edwin-hollen]

/gemini review

[gemini-code-assist]

Code Review

This pull request adds support for SVG filters (specifically Gaussian blur) and alpha masks (mask-type=alpha) across the vector graphics packages, including updates to the codec, compiler, and renderer, along with an interactive gallery example. Feedback on the changes highlights a redundant check in the filter parser, a limitation in parsing filters where feMerge is not the final operation, and incomplete support for multi-layer filters on group nodes (ParentNode).

[edwin-hollen]

/gemini review

[edwin-hollen]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces support for SVG filters (specifically Gaussian blur) and alpha masks across the vector graphics packages. Key changes include adding a paint blur command to the codec, parsing filter primitives (feGaussianBlur, feOffset, feMerge) in the compiler, resolving filter layers in the resolver visitor, and applying image filters to paints in the renderer. Additionally, the example app is updated with a filter and mask gallery. The review feedback highlights three areas for improvement: using the ui. prefix for ImageFilter to prevent compilation errors, resolving a transformation mismatch in visitTextPositionNode that could cause layout misalignment, and using ByteData.sublistView instead of asByteData() for safer byte buffer handling.

[gemini-code-assist]

Code Review

This pull request adds support for SVG filters (specifically Gaussian blur, offset, and merge) and alpha masks across the vector graphics packages, including the compiler, codec, and runtime renderer. It also updates the example application with a gallery demonstrating these features. The reviewer feedback suggests handling trailing delimiters in stdDeviation parsing to prevent invalidating the filter, and combining chained Gaussian blurs using the square root of the sum of squares rather than linear addition.

[edwin-hollen]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces support for SVG filters, specifically blur and multi-layer filters, and alpha masks (mask-type=alpha) across the vector_graphics package, compiler, and codec. It also adds a filter and mask gallery to the example application along with corresponding tests. Review feedback points out three areas for improvement: handling single-layer filters with offsets at the TextPositionNode level to avoid text positioning bugs, ensuring single-layer filters with isSourceAlpha enabled are not ignored during parsing, and using the ui. prefix for ImageFilter.blur in the listener for import consistency.

[edwin-hollen]

/gemini review

[gemini-code-assist]

Code Review

This pull request adds support for SVG filters (such as Gaussian blur and offset) and alpha masks across the vector graphics packages. It updates the compiler to parse and resolve these filters, adds encoding and decoding support in the codec, and implements paint blur rendering in the listener. An issue was identified in the resolver where multi-layer filters on text nodes only process the first layer, ignoring subsequent layers, and a fix was suggested to resolve all layers into a parent node.

[edwin-hollen]

/gemini review

[edwin-hollen]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces support for SVG filters (specifically Gaussian blur, offsets, and multi-layer merging) and alpha masks across the vector graphics packages. Key changes include codec updates to handle paint blur commands, XML parsing for filter and mask attributes, and resolving these filters into paint properties or layers during compilation. Feedback on these changes points out a missing dart:math import in the parser, opportunities to optimize performance by caching a regular expression and avoiding redundant node recreation when the current filter layer has no visual effect, and a suggestion to refactor duplicated paint-creation logic into a helper method.

[gemini-code-assist]

Code Review

This pull request introduces support for SVG filters (such as blur and offset) and alpha masks across the vector_graphics, vector_graphics_codec, and vector_graphics_compiler packages. It adds the capability to parse, encode, decode, and render these filters and masks, along with corresponding tests and gallery examples. Feedback on the changes suggests defaulting parsedX and parsedY to 0.0 when stdDeviation is omitted on a <feGaussianBlur> element to comply with SVG specifications and avoid breaking the filter reference chain.

[edwin-hollen]

/gemini review

[edwin-hollen]

Rebased onto main. Keeping in draft until vector_graphics_codec 1.2.0 (#13148) is published to pub.dev.

[gaaclarke]

I put this in review officially and removed myself as a reviewer, @walley892 is working on this one as the first reviewer.

[gemini-code-assist]

Code Review

This pull request adds support for SVG filters (feGaussianBlur, feOffset, feMerge, and feMergeNode) to the vector_graphics and vector_graphics_compiler packages. The changes introduce SVG filter parsing, update paint attributes to store blur parameters, scale blur standard deviations based on transform scale factors, and adjust clipping, masking, and overdraw optimizers to handle blurred paths correctly. The binary encoder and decoder are also updated to support paint blur instructions, package versions are bumped, and comprehensive tests are added. There are no review comments, and I have no feedback to provide.

[walley892]

Still waiting on the codec change to hit pub.dev to run CI, but I've got a few comments to start us off

[walley892]

Right now, this supports feMerge, feGaussianBlur, feOffset and feMergeNode, and ignores other filter primitives.

This creates a regression compared to today's behavior when mixing supported and unsupported primitives. For example:

<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1_2)">
<rect x="20" y="16" width="100" height="100" rx="12" fill="#4F46E5"/>
</g>
<defs>
<filter id="filter0_d_1_2" x="0" y="0" width="140" height="140" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_2" result="shape"/>
</filter>
</defs>
</svg>

Should render as a drop shadow, but instead just creates a blurred rect

Maybe if a filter contains unsupported primitives - we just fail it and emit an error?

[edwin-hollen]

Thanks, that makes sense. I updated filter to fail and emit an unhandled element error if it contains unsupported primitives, and added a test for it.

[walley892]

Let's make this a full minor version bump - 1.3.0

[edwin-hollen]

Done, bumped vector_graphics to 1.3.0.

[walley892]

What's this for?

[edwin-hollen]

Thanks, it's not needed anymore, it was an unrelated guard for self closing clipPath elements. I removed it.

[walley892]

This creates a new savelayer for each layer, which causes the opacity to be applied to each layer separately instead of to the result of the entire filter. For example:

<svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feOffset in="blur" dx="10" dy="10" result="shadow"/>
    <feMerge>
      <feMergeNode in="shadow"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <g opacity="0.5" filter="url(#drop)">
    <rect x="20" y="20" width="90" height="90" fill="#DC2626"/>
  </g>
</svg>

[edwin-hollen]

Thanks, I realized I didn't have a test for this either. I updated visitParentNode to handle that case, and a test to cover it.

[edwin-hollen]

@walley892 it looks like vector_graphics_codec 1.2.0 is held up because the release workflow run (https://github.com/flutter/packages/actions/runs/38633635933) hit a timeout (flutter/flutter#194870).

[flar]

I apparently never submitted these review comments.

[flar]

These 2 lines can protect against NaN values by reversing the comparison.

sigma > 0.0 ? sigma : 0.0 produces 0.0 for NaN
sigma < 0.0 ? 0.0 : sigma produces NaN for NaN.

NaN values become a NOP here instead of being passed along to future code.

[edwin-hollen]

Good catch, switched both checks to > 0.0 so NaN clamps to 0.0.

[flar]

Add tests for one or both being NaN.

[edwin-hollen]

Added tests covering NaN for sigmaX, sigmaY, and both.

[flar]

New changes LGTM

[walley892]

LGTM assuming CI passes

[edwin-hollen]

Rebased onto main to resolve the vector_graphics 1.2.7 conflict.

@walley892 @flar could one of you re-trigger CI (and add autosubmit) on the new commit? Also, @gaaclarke could you dismiss your Aug 19 CHANGES_REQUESTED review since alpha masks were split out and merged in #13025? Thanks!

[gaaclarke]

Also, @gaaclarke could you dismiss your Aug 19 CHANGES_REQUESTED review since alpha masks were split out and merged in #13025? Thanks!

I don't have a changes requested review on here.

[auto-submit]

autosubmit label was removed for flutter/packages/11909, because This PR has not met approval requirements for merging. Changes were requested by {gaaclarke}, please make the needed changes and resubmit this PR.
The PR author is not a member of flutter-hackers and needs 1 more review(s) in order to merge this PR.

• Merge guidelines: A PR needs at least one approved review if the author is already part of flutter-hackers or two member reviews if the author is not a member of flutter-hackers before re-applying the autosubmit label. Reviewers: If you left a comment approving, please use the "approve" review action instead.