SVG data URI support
Really happy that SVG support has landed but there's still one way to consume SVG that isn't yet supported in html-sketchapp.

We set SVGs as data URIs like so:

```css
.thing {
	background-image: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity" color="#384047" data-reactid="36"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>);
}
```

There's a whole world of complexity here as you can do a lot with a background like change the size, have it repeat, position it etc.

My naive hack to support our use case is as follows:

```js
  function injectSVGbackground(node) {
    const { 'background-position': bgPos, 'background-image': bgImg } = window.getComputedStyle(node);

    if (bgImg.includes('svg+xml')) {
      const [x,y] = bgPos.split(' ');
      const [_, svg] = bgImg.match(/data:.+;charset=utf-8,(.+)/i);
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(decodeURIComponent(svg), "image/svg+xml");
      const svgNode = xmlDoc.querySelector('svg');

      svgNode.setAttributeNS(null, 'style', `position: absolute; top: ${y}; left: ${x}`);

      node.style.backgroundImage = 'none';
      node.appendChild(svgNode);
    }
  }
```

The above essentially extracts the svg text from the data URI and converts it into a a real svg element and injects it into the node it read it from. We set a specific `background-position` so getting the images coordinates is easier.

I'm not sure if this is even possible to support in the tool itself due to the complexity of trying to extract and position the svg element.

We have another case which doesn't work with the above code as it resizes the svg background using `background-size` and relies on the default `background-position` of `50% 50%`. 

Hoping the hive mind can come up with a solution.