Bug 211617 - CSS filter property does not work with inlined SVG
Summary: CSS filter property does not work with inlined SVG
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-05-08 02:03 PDT by naktinis
Modified: 2024-05-07 09:41 PDT (History)
10 users (show)

See Also:

Attachments
Rendering examples (259.79 KB, image/png)
2020-05-08 02:03 PDT, naktinis 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description naktinis 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
Comment 1 Radar WebKit Bug Importer 2020-05-08 15:46:10 PDT 
<rdar://problem/63039570>
Comment 2 Simon Fraser (smfr) 2020-05-11 16:59:32 PDT 
Probably RenderSVGInline::requiresLayer() const final { return false; }
Comment 3 naktinis 2020-09-17 10:40:53 PDT 
Simon Fraser, do you think this could be an easy fix?
Comment 4 Ahmad Saleem 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!