Tracking: SVG Filter Support

[ajlende]

SVG filter support was initially added in the form of Duotone filters in block supports and global styles quite a while ago. The end goal was to enable more creative designs for WordPress websites by leveraging SVG filters. Duotone support was added into core because it isn't too opinionated in design, but the true potential is enabling plugin/theme authors to create their own opinionated filters.

This tracking issue is focusing on issues that are not unique to duotone and would need to be solved for plugin-based SVG filters. Duotone specific issues are tracked in #47304.

Experimental APIs

• block.json API: consider graduating __experimentalSelector and __experimentalDuotone from experimental to stable #45194

Bugs

• Duotone: User defined filters are ignored if the name matches theme origin filters. #35650
• wp_render_duotone_support() in > 5.9 prevents duotone filters being applied when loading page content with ajax. #39054
• Add option for rendering SVG filters when the filter doesn't appear in block markup #53662

Performance Issues

• Duotone in cover block slows scrolling when background is fixed #46470
• WP 5.9 adds default Duotones before closing the body #38299

Theme switching

• Duotone and social icons are hard coded as hex values and this is not good when switching style variations #46547
• Duotone: Dynamic filters based on theme.json variables #33905

Extensibility (filter plugins)

Block support plugin hooks

This can more-or-less already be achieved. Duotone was initially implemented this way in Automattic/block-experiments using the following filters.

As the plugin has to define which blocks support should be added too, it's rather difficult to support non-core blocks with this approach.

Global styles plugin hooks

There is currently no way to extend global styles definitions using WP_Theme_JSON, but in #49103 we experimented with rolling our own global styles through block supports. The last missing piece is merging default, theme, and user origins which is still configured in PRESETS_METADATA in WP_Theme_JSON.

Safari Bugs

Safari has many more SVG filer related bugs than other major browsers. These are some to be aware of when working on SVG filters in WordPress.

• Bug 6022 - SVG Filters do not support source images besides "sourceGraphic" and "sourceAlpha"
• Bug 99996 - SVG Filter Updates do not trigger repaint
• Bug 127102 - External SVG filter references don't work as expected
• Bug 131085 - SVG-filtered anonymous renderers not updated when filter is loaded
• Bug 184601 - CSS filter property with feColorMatrix on moving elements does not work
• Bug 211617 - CSS filter property does not work with inlined SVG (data URLs)
• Bug 258225 - External SVG with filter does not render correctly