<h1>Hexadecimal color values in SVG as data url</h1>
<p>This works:</p>
<figure id="keyword">
  <div></div>
  <figcaption><code>background-image: url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;&lt;circle fill="<mark>red</mark>" cx="10" cy="10" r="10"/&gt;&lt;/svg&gt;')</code></figcaption>
</figure>
<p>RGB(A) and HSL(A) color values work as well. One might think hexadecimal values like <code>#F00</code> would work the same. They even do in some browsers, but do not in others (e.g. Firefox):
</p>
<figure id="hex-unescaped">
  <div></div>
  <figcaption><code>background-image: url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;&lt;circle fill="<mark>#F00</mark>" cx="10" cy="10" r="10"/&gt;&lt;/svg&gt;')</code></figcaption>
</figure>

<p>Reason: <code>#</code> in URLs starts a fragment identifier. If you mean the character #, you need to escape it: <code>%23</code> in this case.</p>
<figure id="hex-escaped">
  <div></div>
  <figcaption><code>background-image: url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"&gt;&lt;circle fill="<mark>%23F00</mark>" cx="10" cy="10" r="10"/&gt;&lt;/svg&gt;')</code></figcaption>
</figure>

<p>Thanks to Robert Longson for pointing that out.</p>


#keyword div {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle fill="red" cx="10" cy="10" r="10"/></svg>')
}

#hex-unescaped div {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle fill="#F00" cx="10" cy="10" r="10"/></svg>')
}

#hex-escaped div {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle fill="%23F00" cx="10" cy="10" r="10"/></svg>')
}

html {
    font: 1em/1.5 sans-serif;
}

figure {
    margin: 1em 0;
    padding: 0
}

figcaption {
    margin-top: 0.5em;
    max-width: 80ch
}

figure>div {
    width: 100%;
    height: 4em;
    background-repeat: no-repeat
}

* {
    box-sizing: border-box
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.