Estoy usando este ejemplo de la documentación de Deck.GL

Lo que necesito es anidar una imagen dentro de una etiqueta SVG. A continuación se muestra cómo he construido mi 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)), }), }) ),

Cuando cargo mi mapa, puedo ver la <path> que es un alfiler de color, sin embargo, la <image> se muestra como un enlace roto.

Cualquier ayuda en esto sería muy apreciada