Programatically generating an SVG and assigning it to the background-image of an element

Question

I am recreating a board game using svelte. Each Tile component is passed an object which stores a unique code for each tile, I want to have a function that takes this code and generates an SVG object that I can set as the components background image. Is this possible and if so how?

Tile.svelet:

<script>
    import {generateSVG} from './utils.js';
    export let tile
</script>

<div id={tile.code} class='tile' style={generateSVG(tile.code)}>
    <p>tile.name</p>
</div>

<style>
    .tile {
        width: 50px;
        height: 50px;

        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

I have tried the above code where generateSVG() returns a set string

background-image: url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><line x1="25" y1="25" x2="25" y2="12"/></svg>)

But this does nothing