Issue with svg in css background url

Lightning fast! Thank you.

It runs ok now.

BUT, I have a problem:
most of my SVG images do not appear on my buttons anymore.

My previous version was 0.48.8 and everything was ok.
Have there been changes in this area?

Damn, I forgot to whitelist svg files…

This and a bunch of other fixes are included in v0.49.10

Great! I’m watching it live! (with popcorn) …

C’est génial ce que tu fais Jean-Emmanuel, bravo!
Je vais essayer dès que c’est prêt.

Sorry Jean-Emmanuel,

1- SVG files still not loading, only 2 or 3 (out of 50 or so)!

2- The right-click menu option “App” and thus “Relaunch” are missing! Is this normal?

version 0.49.10

  1. what do you mean only 2 or 3 ? Some svg load but not all ? Is there a particular difference between them ?

  2. Relaunch has been removed in v0.49.6, it doesn’t work with current engine’s version.

Yes some svg load but not all, strange.
I compared, but I am unable to see a différence.
Wait …
Do you need an example?

This one loads correctly:

:host {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.28 169.94"><defs><style>.cls-1,.cls-2{fill:none;stroke:red;stroke-linejoin:round;}.cls-1{stroke-linecap:round;stroke-width:14.72px;}.cls-2{stroke-linecap:square;stroke-width:23px;}</style></defs><title>delete_restart</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="89.92" y1="136.76" x2="7.36" y2="136.76"/><line class="cls-1" x1="7.36" y1="136.76" x2="42.24" y2="162.58"/><line class="cls-1" x1="7.36" y1="136.76" x2="42.24" y2="112.67"/><line class="cls-2" x1="80.34" y1="16.26" x2="17.82" y2="78.78"/><line class="cls-2" x1="80.34" y1="78.78" x2="17.82" y2="16.26"/></g></g></svg>') 
no-repeat 50% 40%;
background-size: 22%;
background-color: #111111;
}

This one does not load:

:host {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.35 76.73"><defs><style>.cls-1{fill:#fff;}</style></defs><title>1-4</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="22.24" width="1.92" height="63.36"/><path class="cls-1" d="M24.35,64.92q0,4.8-5.67,8.54A17.9,17.9,0,0,1,8.54,76.73Q0,76.66,0,70.06q0-4.8,5.6-8.4a18.31,18.31,0,0,1,10.07-3.2Q24.34,58.45,24.35,64.92Z"/></g></g></svg>') 
no-repeat 50% 30%;
background-size: 10%;
background-color: #ff6200;
}

You can enclose code blocks in between triple backticks : ```

That’s funny, the bug I fixed is totally unrelated to your issue (it was about loading sgv files. As far as I can see there it’s not a bug in o-s-c, chromium just seems unable to use this svg in css. I don’t get why though, gotta investigate…

I’ll keep on generating and testing new svg files on my side in the case I could find any clue that could help you in your investigation.

I found it ! There is an issue with hexadecimal color codes, it seems the # characters breaks svg declarations in recent version of chromium. I’ll report it upstream if it’s not done already. Meanwhile, writing colors with rgb() statements or plain color names works.

Great! You’re good!
And thanks for the information about rgb colors.

So we’ll have to wait for the bug in chromium to be fixed and then a new build for OSC I suppose?

Bad news, it’s actually not a bug (but the fact that it did work before was one) : https://stackoverflow.com/a/28588194

The good news is you just need to replace # with %23 to fix it :slight_smile:

1 Like

I like the last solution ("%23"), better than rgb or color name.

My SVG files were generated from Illustrator, I suppose Adobe also needs to update their software :wink:

Thank you.

The thing is # is perfectly valid in svg but when included in a css url some extra rules apply.

Oh ok, I got it now!