This example page illustrates a bug in WebKit, where an SVG loaded from an external resource via SVG <use> will look for named elements in the importing document, rather than within itself.

The first link illustrates correct usage, where the external SVG file includes both the named filter, and the element that references it. This test should render a white circle on a white background, surrounded by a blurred gray shadow. This example works correctly in Blink and Gecko, but fails in WebKit (as of 2023/08/30).

The second link illustrates the incorrect usage that WebKit seems to expect, where the external SVG file includes the element that references the filter, but the filter definition is present in the importing document instead, in an inline SVG. This test should render an entirely white image, as both the circle and background are white, and the filter definition should be found missing. This example works correctly in Blink and Gecko, but fails in WebKit (as of 2023/08/30).

Correct usage — filter definition inside external SVG
Incorrect usage — filter definition inside importing document