Why does an SVG appear fine in HTML but not when I use it as an background image in CSS?

Question

I have an SVG I would like to use as the icon on a <select> element.

If I paste the following into a div by itself it works - the SVG renders and appears.

<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>

However, when I add it to CSS as a background image, eg:

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18.899' height='10.449' viewBox='0 0 18.899 10.449'><path id='Path_5' data-name='Path 5' d='M553.826,51.436l8.035,8.035,8.035-8.035' transform='translate(-553.826 -51.436)' fill='none' stroke='#fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");

It doesn't work - nothing appears. However, I am able to get other SVG icons to appear using CSS.

My full CSS class is:

.select1 {
  width: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

This fiddle demonstrates more clearly what I mean: https://jsfiddle.net/MeltingDog/uhter1f3/12/

Why does the SVG appear fine in HTML but not as a background image?

@Danny'365CSI'Engelman – There's nothing wrong with the `<` and `>` characters. — Quentin, May 18 '21 at 07:01
Indeed.. < and > are fine; its the # ... as, LOL, I myself answered: https://stackoverflow.com/questions/64477037/why-is-my-image-not-rendering-with-this-data-url/64482141#64482141 — Danny '365CSI' Engelman, May 18 '21 at 07:17

score 1 · Accepted Answer · answered May 18 '21 at 07:01

# is a special character in URLs. Your SVG gets cut off by stroke='#fff' in the middle of an attribute.

You have to encode it.

.example {
  height: 100px;
  width: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15.826' height='9.413' viewBox='0 0 15.826 9.413'><path id='Path_100' data-name='Path 100' d='M175.428,127l6.5,7,6.5-7' transform='translate(-174.015 -125.584)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>");
}

<div class="example"></div>

Why does an SVG appear fine in HTML but not when I use it as an background image in CSS?

1 Answers1