104169 2012-12-05 13:58:37 -0800 Data URI SVG Fills/Filters 2026-01-30 10:16:37 -0800 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) All All NEW http://xn--dahlstrm-t4a.net/svg/paint/datauri-gradient.svg InRadar P2 Normal --- 1 me taher_ali bfulgham c.laborier gwynne karlcow lecaignec.quentin maggotfish sabouhallawa tigt webkit-bug-importer zimmermann oldest_to_newest 784089 0 me 2012-12-05 13:58:37 -0800 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. 1526726 1 tigt 2019-04-12 06:29:38 -0700 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. 1762792 2 c.laborier 2021-05-22 03:18:45 -0700 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 1884328 3 bfulgham 2022-07-15 15:46:33 -0700 Firefox handles this correctly. Safari and Chrome do not. 1884333 4 webkit-bug-importer 2022-07-15 15:47:36 -0700 <rdar://problem/97098436> 1917538 5 lecaignec.quentin 2022-12-08 03:06:38 -0800 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. 1917706 6 463947 sabouhallawa 2022-12-08 13:13:35 -0800 Created attachment 463947 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. 2175011 7 karlcow 2026-01-25 22:11:24 -0800 Working in Firefox, Chrome, and Safari (LBSE) Not working in Safari. 2175012 8 karlcow 2026-01-25 22:12:05 -0800 Is there a strong dependency on LBSE? 2176597 9 taher_ali 2026-01-30 10:16:37 -0800 Pull request: https://github.com/WebKit/WebKit/pull/57566 463947 2022-12-08 13:13:35 -0800 2022-12-08 13:13:35 -0800 css-filter-svg-element.html css-filter-svg-element.html text/html 182 sabouhallawa PHN0eWxlPgogIC5ncmF5LXNjYWxlLWZpbHRlcmVkIHsKICAgIGZpbHRlcjogZ3JheXNjYWxlKDgw JSk7CiAgfQo8L3N0eWxlPgo8Ym9keT4KICA8c3ZnPgogICAgPHJlY3QgY2xhc3M9ImdyYXktc2Nh bGUtZmlsdGVyZWQiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJyZWQiLz4KICA8L3N2 Zz4KPC9ib2R5Pgo=