4

After reading this question: Inline SVG in CSS (works perfectly on Firefox and Chrome)

body { background-image: 
        url("data:image/svg+xml;utf8,<svg>........</svg>");
      }

I tried to apply some filter effects with 

filter: url("data:image/svg+xml;utf8,<svg>........</svg>#filter01")

It worked on FF, but didn't work on Chrome.

What's the reason and how can I fix it?

Community
  • 1
  • 1
Erik
  • 103
  • 1
  • 9
  • Do you need to apply a filter to the svg? Just define and use the filter inside the svg instead, that will work in most browsers. – Erik Dahlström Dec 18 '12 at 17:12
  • @Erik Dahlström I know it's better to embed an inline SVG element or use an external .svg file. But I just want to know if CSS can do something like that. – Erik Dec 18 '12 at 21:01
  • try https://yoksel.github.io/url-encoder/ – Akin Zeman Feb 15 '23 at 00:56

2 Answers2

1

try to use escape on the data string , like

filter: url("data:image/svg+xml;utf8,%3Csvg%3E........%3C/svg%3E#filter01")
dswwsd
  • 133
  • 5
0

I don't believe you can fix it. This was only ever fully supported by Firefox and this usage will now be superseded by the *-filter property.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105