Q:

Background svg image doesn't work in ::before pseudo element

I'm having an issue trying to apply a svg background image to the ::before pseudo element of another element. 
The problem is that the image is just not showing up.  When I check out the element in the browser tools, there's no ::before pseudo element at all. 
Here's my HTML:
<section class="spotlight">
  <div class="container">
    <div class="row">
      <p>Lorem ipsum dolor sit amet, etiam lorem adipiscing elit.</p>
    </div>
  </div>
</section>

And my CSS:
.spotlight {
        background-color: #4c5c96;
    }

        .spotlight::before {
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
        }

I have a fiddle here: https://jsfiddle.net/fcwp29qw/
The problem isn't with the pseudo element, I can add content to ::before and it works fine: https://jsfiddle.net/fcwp29qw/1/
There also isn't a problem with the background image format, I can add it to the element itself instead of ::before and it works: https://jsfiddle.net/fcwp29qw/2/
So what am I doing wrong here? 

A:

You can try this

.spotlight {
  background-color: #4c5c96;
  position : relative;
}

.spotlight::before {
  position : absolute;
  content: '';
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
}

