OpenLayers Icon style : 'src' with SVG symbol not recognized

Question

const paris = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([2.353, 48.8566])),
});

paris.setStyle(
  new ol.style.Style({
    image: new ol.style.Icon({
    src: "data:images/svg+xml;utf8," + encodeURIComponent('<svg viewBox="0 0 50 50" width="50" height="50"><use href="icons_gdepa_normalizedV2.svg#croix" xlink:href="icons_gdepa_normalizedV2.svg#croix"></use></svg>'),
    }),
  })
);

const vectorSource = new ol.source.Vector({
  features: [paris],
});

const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
});

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    vectorLayer,
  ],
  target: document.getElementById("map-container"),
  view: new ol.View({
    center: ol.proj.fromLonLat([2.896372, 44.6024]),
    zoom: 3,
  }),
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html,
      body,
      #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
  <body>
    <div id="map-container"></div>
    <script src="./main.js" type="module"></script>
  </body>
</html>

note: I add a snippet for the context but it cannot really show the problem since it's about the call of an external svg file.

All my icons are gathered in an external SVG file. For the sake of example let's say I store only one icon in this file like this (file named icons.svg):

<svg display="none" xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><symbol viewBox="0 0 50 50" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" width="50" height="50" id="croix" y="0"><path d="M19.346 24.938L1.18 43.104a4.047 4.047 0 000 5.714 4.037 4.037 0 005.704 0l18.165-18.165L43.114 48.71a4.038 4.038 0 005.705 0 4.03 4.03 0 000-5.7L30.754 24.937 48.718 6.975a4.03 4.03 0 000-5.701 4.038 4.038 0 00-5.705 0L25.049 19.237 6.985 1.18a4.038 4.038 0 00-5.705 0 4.033 4.033 0 000 5.7l18.066 18.058z" fill="#297c81"/></symbol></defs></svg>

I try to retrieve in 'src' attribute of an icon element in openLayers the svg symbol with the id 'croix' but it doesn't display ( and no error message).

paris.setStyle(
  new ol.style.Style({
    image: new ol.style.Icon({
    src: "data:images/svg+xml;utf8," + encodeURIComponent('<svg viewBox="0 0 50 50" width="50" height="50"><use href="icons_gdepa_normalizedV2.svg#croix" xlink:href="icons_gdepa_normalizedV2.svg#croix"></use></svg>'),
    }),
  })
);

In my understanding it is not because of the character #, already discussed on this page: SVG data image not working as a background-image in a pseudo element. It is more like in 'src' of Icon we cannot use a 'href'. Am I doing something wrong or is it impossible to call for a part of an external svg file in this 'src' attribute ? Thank you for your help.

OpenLayers Icon style : 'src' with SVG symbol not recognized

0 Answers0