Background-image SVGs not working

[DavidWaumsley]

UPDATE: Sorry, the information seems wrong below SVGs in the other BB areas only seem to work when in the editor view not when published.

You can use SVGs as a background-image URL in BB's Layout/Global CSS but it seems not to work in the BB code settings areas.

The bottom of his page shows an example:
https://designs.beaverjunction.com/fancy-headings/

This is the code use:
.test .fl-module-content {
background-color: #11aa44;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230099ff' fill-opacity='1' d='M0,32L48,53.3C96,75,192,117,288,165.3C384,213,480,267,576,272C672,277,768,235,864,192C960,149,1056,107,1152,90.7C1248,75,1344,85,1392,90.7L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

Thank you :-)

[fastlinemedia]

Hey David,

Thanks for posting. I did some testing and it looks like there might be an issue with your CSS.

I tried this in the CSS for a row and it worked as expected...

.fl-row-content {
   background-color: #11aa44;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm0 14c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6zm-.71-5.29c.07.05.14.1.23.15l-.02.02L14 13l-3.03-3.19L10 5l-.97 4.81h.01c0 .02-.01.05-.02.09S9 9.97 9 10c0 .28.1.52.29.71z"/></g></svg>');
}

It looks like your opening and closing brackets are encoded to %3C in the svg string.

Justin

[DavidWaumsley]

Thanks Justin,

Oh no, stupid me! I see that now. SVGs are not exactly my strength.

The issue remains when I putting your code in a row on a site with only Beaver Builder on it. It show fine when in the editor (see link):

https://cloud.wpcornershop.com/jkuDGdmz

But it's gone when published:

https://lite.beaverjunction.com/services/ (green section top).

[fastlinemedia]

Thanks for the examples. This one has me scratching my head. It's working fine on my site, even published. I dug around in the inspector in your example and when changing https to http in the svg string on your site, it works. Can you give that a shot and let me know how it goes?

I can confirm in the inspector that the CSS is being rendered correctly by the plugin.