I'm using this example from the Deck.GL documentation

What I need is to nest an image within an SVG tag. Below is how I have built my SVG

function createSVGIcon(icon) {
  return `\
    <svg width="61" height="75" viewBox="0 0 61 75" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 30.0412C2.26792e-05 56.6758 30.0379 74.8636 30.0379 74.8636C30.0379 74.8636 61 56.8367 61 30.0412C61 14.0981 46.8826 -0.251869 30.0379 0.00335371C13.4503 0.25468 -1.37723e-05 13.867 0 30.0412Z" fill="#2A6019"/>
      <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <image href="${icon}" height="600" width="600" />
      </svg>
    </svg>
  `;
}

function svgToDataURL(svg) {
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}

new IconLayer(
          this.getSubLayerProps({
            sizeScale: 11,
            data: singleTaskArray,
            id: "icon",
            getSize: () => 4,
            getPosition: (d) => d.geometry.coordinates,
            getFillColor: (d) => {
              switch (d.properties.priority) {
                case "1":
                  return [240, 72, 22];
                case "2":
                  return [250, 188, 56];
                default:
                  return [20, 98, 0];
              }
            },
            getIcon: (d) => ({
              width: 61,
              height: 75,
              mask: false,
              url: svgToDataURL(createSVGIcon(d.properties.type.icon)),
            }),
          })
        ),

When I load my map I can see the <path> which is a colored pin, however the <image> is showing as a broken link.

Any help on this would be much appreciated