Can't encode this SVG into a working background image

Question

I have an SVG:

<svg xmlns="https://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="7" height="6" patternTransform="rotate(45)">
      <line x1="1" y="0" x2="1" y2="7" stroke="#fffa72" stroke-width="1.5" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="#fffeea" />
  <rect width="100%" height="100%" fill="url(#stripes)" />
</svg>

It tested it with an external tool and it works nicely:

Now I'd like to use it in background-image. I encoded the SVG with https://www.url-encode-decode.com/

I then take the encoded SVG and put it into my SCSS:

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%22100%25%22+height%3D%22100%25%22%3E%0D%0A++%3Cdefs%3E%0D%0A++++%3Cpattern+id%3D%22stripes%22+patternUnits%3D%22userSpaceOnUse%22+width%3D%227%22+height%3D%226%22+patternTransform%3D%22rotate%2845%29%22%3E%0D%0A++++++%3Cline+x1%3D%221%22+y%3D%220%22+x2%3D%221%22+y2%3D%227%22+stroke%3D%22%23fffa72%22+stroke-width%3D%221.5%22+%2F%3E%0D%0A++++%3C%2Fpattern%3E%0D%0A++%3C%2Fdefs%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22%23fffeea%22+%2F%3E%0D%0A++%3Crect+width%3D%22100%25%22+height%3D%22100%25%22+fill%3D%22url%28%23stripes%29%22+%2F%3E%0D%0A%3C%2Fsvg%3E');

this doesn't work. the background remain empty. I know my HTML works fine because when I plug a different background image with a SVG I found online, it works nicely:

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22a%22%20patternUnits%3D%22userSpaceOnUse%22%20width%3D%225%22%20height%3D%225%22%20patternTransform%3D%22rotate(45)%22%3E%3Cpath%20stroke%3D%22%23fffa72%22%20d%3D%22M1%200v5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E');

What am I doing wrong?

see my answer for: https://stackoverflow.com/questions/54077571/why-does-my-image-not-fit-100-background/54077656?noredirect=1#comment94988804_54077656 — Bob, Jan 09 '19 at 23:16
This may be helpful in the future: [URL-encoder for SVG](https://codepen.io/yoksel/pen/JDqvs) — enxaneta, Jan 10 '19 at 08:18

tao · Accepted Answer · 2019-01-10T00:14:18.007

3

Your xmlns value is incorrect. It's http://www.w3.org/2000/svg, not https://.

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='stripes' patternUnits='userSpaceOnUse' width='7' height='6' patternTransform='rotate(45)'%3E%3Cline x1='1' y='0' x2='1' y2='7' stroke='%23fffa72' stroke-width='1.5' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23fffeea' /%3E%3Crect width='100%25' height='100%25' fill='url(%23stripes)' /%3E%3C/svg%3E");
}
html, body {height: auto;}

<div></div>

Documentation: https://www.w3.org/2000/svg - yep, with https:// :D

In embedded <svg> elements most browsers default the attribute to http://www.w3.org/2000/svg when it doesn't resolve (you can basically delete it and it still works). But they don't do it for background-image base64 encoded SVGs.

In short, it won't work as image if it's invalid.

edited Jan 10 '19 at 00:14

answered Jan 09 '19 at 23:47

tao

82,996
16
114
150

Thanks. One Q: How did you produce your content? it wasn't just removing the "s" from my "https". My original string is quite different than yours in the escaping of it. **mine**: `background-image: url('data:image/svg+xml;charset=utf8,%3Csvg+xmlns%3D%22https%3A%2F%2Fwww.w3.org......` **where yours starts with** `background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'` – JasonGenX Jan 10 '19 at 17:02
guess my question to you is what process of encoding to you pass my original `svg` code through to make it work (apart from https -> http). modifying my original code and removing the 's' doesn't make the code work. but using your encoded example worked. How did you encode it? – JasonGenX Jan 10 '19 at 17:12
I would greatly appreciate it if you can have a look at my comments – JasonGenX Jan 10 '19 at 17:22
@Jason, I did exactly what you did (used an [online encoder](https://yoksel.github.io/url-encoder/)), but **I did** manually change the `xmlns` from `https://` to `http://` after realizing that's the cause. (Working as embedded ` – tao Jan 10 '19 at 17:56
You can read about the differences between base64 encoding and URL encoding [here](https://stackoverflow.com/questions/10267597/url-encode-vs-base64-encoding-usages). They are similar, but different. A `data:image/svg+xml` object should be encoded with base64, afaik. It might be possible to work with other encoding types, but URL encoders are specific for URLs, they're not for `data`. – tao Jan 10 '19 at 18:02

Kosh · Answer 2 · 2019-01-10T02:59:39.513

0

Maybe this is not the answer to your exact question,
but you might make your background using a linear-gradient with a way simpler code:

body {
  background: linear-gradient(135deg, #fff 2px, #fffa72, #fff 5px, #fff 9px, #fffa72, #fff 12px) 0 0 / 10px 10px;
}

edited Jan 10 '19 at 02:59

answered Jan 10 '19 at 02:48

Kosh

16,966
2
19
34

It doesn't answer my question, but I appreciate it nonetheless. My goal was to learn how to embed SVG's, but you are correct that for this particular purpose, your much simpler solution would have done the work. Thank you. – JasonGenX Jan 10 '19 at 16:36

score -3 · Answer 3 · answered Jan 10 '19 at 03:57

-3

Save your svg to a file.svg and try using https://www.developertoolkits.com/base64/encoder

It takes images and turns them into data urls that you can then drop inline or in css like you are trying to do.

The website you are using is a url encoder.

answered Jan 10 '19 at 03:57

Jonathan S.

541
1
3
13

Can't encode this SVG into a working background image

3 Answers3