Svg Data Image as CSS Background

SVG data image not working as a background-image in a pseudo element

The # character in a URL is reserved to indicate the start of a fragment identifier.

You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23

Using an Data URI SVG as a CSS background image

See how the working fiddle has double quotes just inside the url() and then all the SVG content uses single quotes? You need to do the same. Otherwise the parser doesn't know where the url content ends.

Alternatively you could make the url use single quotes and keep your SVG content the same.

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }

Inline SVG in CSS

Yes, it is possible. Try this:

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }

• http://jsfiddle.net/6WAtQ/

(Note that the SVG content needs to be url-escaped for this to work, e.g. # gets replaced with %23.)

This works in IE 9 (which supports SVG). Data-URLs work in older versions of IE too (with limitations), but they don’t natively support SVG.

Did Chrome 72 break 'data:image/svg+xml;utf8' for css background svgs?

It is not valid for data URIs to contain # characters like yours has, you must escape them as %23.

Chrome 71 and earlier version are supporting # in URIs but not after 72 they don't.

how to change svg fill color when used as base-64 background image data?

I want to post an answer to my own question. No exactly an answer, since it doesn't imply svg as background and base64, but it's my current alternative way, much more effective if you just need mono-color icons: just use svg as css mask, and change background color. Then you can also apply transitions on mouse events. I mean something like this:

mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xml:space="preserve"><path d="M11.432 9.512a.636.636 0 0 1 0 .918L2.12 19.742a.636.636 0 0 1-.458.201.637.637 0 0 1-.46-.201l-1-.998C.068 18.609 0 18.459 0 18.285s.068-.329.199-.461l7.854-7.852L.199 2.118A.638.638 0 0 1 0 1.66c0-.174.068-.327.199-.46l1-.998A.634.634 0 0 1 1.66 0c.172 0 .325.068.458.201l9.314 9.311z"/></svg>');
mask-size: auto 12px;
mask-repeat: no-repeat;
transition: background-color 200ms;
background-color: #ff0000;

Please see this fiddle for come more code and demo:

https://jsfiddle.net/o25beLqj/

Also note a couple of things:

• mask-image does not have base64 code inside. It's just preceeded by data:image/svg+xml;utf8,

• mask css properties are quite about the same of css background properties, take a look to docs, and you'll see you can do really a lot and they can substitute background images in a variety of use cases

Can an encoded SVG for background-image be imported from a separate file?

Put some hours in investigating which characters are not allowed in a data:image/svg URI

Many encoders convert < and >, but those are valid.

• Load your external SVG file and replace all invalid characters

• Create a new <style> element with the background-image

Wrapped in a modern Web Component so it totally does not matter when the script is executed

⚠️ xmlns="http://www.w3.org/2000/svg" must be present in the SVG file; it is not required when you inline SVGs in modern browsers.

<svg-import-background src="//svg-cdn.github.io/red.svg" selector="#container"></svg-import-background>
<svg-import-background src="//svg-cdn.github.io/yellow.svg" selector="div > h2"></svg-import-background>
<svg-import-background src="//svg-cdn.github.io/blue.svg" selector="pre"></svg-import-background>

<style>
  body { font:16px Arial; color:beige }   h2   { color: black }
</style>

<div id="container">
  <h2>Web Component <svg-import-background></h2>
  Inject external SVG file into CSS background-image
  <pre>
<svg-import-background ATTRIBUTES:
                                   src="PATH TO SVG FILE"
                                   selector="Element selector"
  </pre>
</div>

<script>
  customElements.define("svg-import-background", class extends HTMLElement {
    async connectedCallback() {
      let svg = await (await fetch(this.getAttribute("src"))).text();
      svg = svg.replace(/\>[\t\s\n ]+\</g, "><"); // replace all BETWEEN tags
      svg = svg.replace(/#/g, "%23");
      svg = svg.replace(/"/g, "'");
      this.innerHTML = `<style>${this.getAttribute("selector") || "body"}{`+
        `background-image:url("data:image/svg+xml;charset=UTF-8,${svg}")`+
      `}</style>`;
    }
  })
</script>

<svg viewBox="0 0 8 8"><rect width="100%" height="100%" fill="gold"></rect></svg>

Is it possible to use css variables in a svg background-image?

Like @BoltClock said in the comments, it's not possible to use css variables in urls.

---

Related Topics