Skip to content

Support for SVG filter effects #4308

Description

@0HyperCube

SVG has support for many filter effects (elements prefixed with fe). Documentation is available on MDN list of SVG elements. A filter can be made by composing one or more of these filter effects. For example a glow could be made by combining the feMorphology to make the element thicker and then the feGaussianBlur to blur the result. This can allow for powerful graphic effects whilst remaining a vector (useful for exporting and performance). Examples from the Inkscape filter gallery:

Inkscape filter gallery featuring a grid of different filter effects such as oil painting

Filters can also be composed by hand using a filter editor view:

a filter editor, featuring a list of filter effects and the details for a selected effect

This style of approach lends itself well the the existing graphite node graph.

Currently there is implemented a raster based blur and the ability to change the blend mode (this is implemented with the blend mode not a filter effect). However this significantly limits the possibilities compared to Inkscape.

The filter effect must also be implemented in the vello rendering pipeline, attempting to match the SVG rendering in a browser. For efficient SVG output, it should be possible to combine filter effects applied to an element into a single filter that can be reused. However this is not a particular priority given the rest of the SVG output is horrible.

Metadata

Metadata

Assignees

No one assigned

    Labels

    GraphicsGPU and graphics programming related

    Projects

    Status
    Short-Term

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions