SCSS different base64 SVG background images, not just changing color

Laura Sage 0
Viewed 18

I have a page that I need to change the look of on the fly. Everything works great for fonts and colors. But I have a couple of svgs used as background images that I would like to be able to switch out as well, and I'm not having luck.

This is one of the background images: background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><path fill='%23FF0066' d='M52.3,-13.5C60.1,7.1,53.5,35.8,36.5,47.5C19.5,59.2,-7.9,53.9,-29.9,38.5C-51.8,23.2,-68.4,-2.2,-62.5,-20.1C-56.6,-38,-28.3,-48.3,-3,-47.3C22.2,-46.3,44.5,-34,52.3,-13.5Z' transform="translate(100 100)' /></svg>");

I have tried to create a variable using the same code (but different SVG data, of course), but nothing shows up. Is this not possible? Or am I missing something obvious?

svg sass
1 Answers

You can have base64 and URL-encoded background images as variables in SCSS.

@Amaury Hanser Is correct, your issue is a typo in your example. It should be

background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><path fill='%23FF0066' d='M52.3,-13.5C60.1,7.1,53.5,35.8,36.5,47.5C19.5,59.2,-7.9,53.9,-29.9,38.5C-51.8,23.2,-68.4,-2.2,-62.5,-20.1C-56.6,-38,-28.3,-48.3,-3,-47.3C22.2,-46.3,44.5,-34,52.3,-13.5Z' transform='translate(100 100)' /></svg>");

Barebones basic example of it working: https://jsfiddle.net/qw9ofu2d/

NB: If you do need both single and double quotes in a string variable, SCSS works like other languages and you can escape with a back slash.

EG: Using $example: "It's \"ok\""; would output: It's "ok"

REF: https://sass-lang.com/documentation/values/strings

userJ6150
Related