Bug 211617

Summary: CSS filter property does not work with inlined SVG
Product: WebKit Reporter: naktinis
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, chriskirknielsen+wkbugs, dino, ian, rniwa, sabouhallawa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac   
OS: macOS 10.15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=261806
Attachments:
Description Flags
Rendering examples none

naktinis
Reported 2020-05-08 02:03:30 PDT
Created attachment 398842 [details] Rendering examples It is possible to use: filter: url(#svg-filter-desaturate); but not: filter: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate); } The use case this would enable is to define filters inside CSS stylesheets. This would give developers access to a very powerful filter system they wouldn't have otherwise. For example, you could "colorize" with feColorMatrix. Works on Firefox 76 and Chrome 81. Here's a full example: https://codepen.io/foobarquux/pen/JjddKZw
Attachments
Rendering examples (259.79 KB, image/png)
2020-05-08 02:03 PDT, naktinis 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-05-08 15:46:10 PDT
<rdar://problem/63039570>
Simon Fraser (smfr)
Comment 2 2020-05-11 16:59:32 PDT
Probably RenderSVGInline::requiresLayer() const final { return false; }
naktinis
Comment 3 2020-09-17 10:40:53 PDT
Simon Fraser, do you think this could be an easy fix?
Ahmad Saleem
Comment 4 2022-08-07 05:58:24 PDT
I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case and it does show these difference compared to other browsers: Desaturate, encoded as base64 ----> RED Desaturate, encoded with "escape()" ----> RED Turn white to green, encoded with "escape()" ---> Missing completely. Just wanted to update latest testing results. Thanks!
Christopher Kirk-Nielsen
Comment 5 2025-04-18 14:13:56 PDT
Any updates on this? I would love to be able to use external/inlined SVGs for filters. Thank you!
Note You need to log in before you can comment on or make changes to this bug.