Problem about Custom Shaped SVG in IconLayer of Deck.GL (Broken Image photo on Map)

Question

I'm trying Custom SVG rendering in Deckgl Component.

Actually following topic solved the largest part of my problem but Im trying to fill png with image. But there it renders on map with broken image photo.

https://stackoverflow.com/questions/69086721/

function createSVGIcon(idx) {
  return `
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="image" x="0" y="0" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image x="0" y="0" height="1" width="1" preserveAspectRatio="xMidYMid slice" href="https://upload.wikimedia.org/wikipedia/commons/5/58/Wikipedia-logo-io.png" />
    </pattern>
  </defs>
  <polygon points="50,10 90,90 10,90" style="fill:url(#image);stroke:black;stroke-width:1" />
</svg>
  `;
}

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

const CENTER = [-122, 37];

const IconLayer = new deck.IconLayer({
  id: 'icon-layer',
  data: [...new Array(10)].map((_, idx) => [CENTER[0], CENTER[1] + idx]),
  getIcon: (d, { index }) => ({
    url: svgToDataURL(createSVGIcon(index)),
    width: 24,
    height: 24
  }),
  sizeScale: 10,
  getSize: d => 4,
  getPosition: d => d
});

const deckgl = new deck.DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  initialViewState: {
    latitude: CENTER[1] + 5,
    longitude: CENTER[0],
    zoom: 5
  },
  controller: true,
  layers: [IconLayer]
});

It loaded to explorer as I expected. On chrome side when I open the encoded URI component it seems ok.

data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9ImltYWdlIiB4PSIwIiB5PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBwYXR0ZXJuQ29udGVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CjxpbWFnZSB4PSIwIiB5PSIwIiBoZWlnaHQ9IjEiIHdpZHRoPSIxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgaHJlZj0iaHR0cHM6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy81LzU4L1dpa2lwZWRpYS1sb2dvLWlvLnBuZyIgLz4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHBvbHlnb24gcG9pbnRzPSI1MCwxMCA5MCw5MCAxMCw5MCIgc3R5bGU9ImZpbGw6dXJsKCNpbWFnZSk7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDoxIiAvPgo8L3N2Zz4KICA=

Live Demo

Codepen