Svg embedded vs background

HTML

<svg class="svg_embedded" width="100px" height="100px" viewBox="0 0 21 23">
    <ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/>
</svg>

<span class="svg_background" />

CSS

.svg_embedded
{
  color:white;
}

.svg_background
{
  color:white;
  display: inline-block;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23"><ellipse fill="none" stroke="currentColor" stroke-width="2" cx="13" cy="8" rx="7" ry="7"/></svg>');
  display: block;
  height: 100px;
  width: 100px;
}