As per http://stackoverflow.com/questions/10798397/how-may-i-use-inline-svg-gradient-on-an-element-like-line and the example above, SVG Fills/Filters declared as Data URIs are nonfunctional. Should work inline, internally and externally via CSS.
This bit me recently trying to replicate ::-moz-range-progress (long story). Here’s another reduced test case for filters via data URIs specifically: https://s.codepen.io/tigt/debug/1c301f6c919e6c5aac2b0934585c747c Two green squares should be visible, but in Safari only one is.
Same problem for me describe here (description + showcase) : https://stackoverflow.com/questions/67634831/css-filter-property-does-not-work-on-safari-when-using-inline-svg-in-css-like?noredirect=1#comment119571142_67634831
Firefox handles this correctly. Safari and Chrome do not.
<rdar://problem/97098436>
Same error here, an SVG filter as url("data:...") does not work on webkit. Webkit is the only browser on which this doesn't work, which is a shame given how useful this method is.
Created attachment 463947 [details] css-filter-svg-element.html All CSS filters, including the referenced SVG filters, are not working on SVG elements. Attaching a simple test case. This test case works if LBSE is enabled.