Unable to see others layers when using a svg file as a background Layer

[Raynoxis]

Hello,
I'm a beginner with OpenLayer and JS in general. I create a website with this example : https://openlayers.org/en/latest/examples/svg-layer.html. I do some modifications to had a vectorLayer as a Waypoint to display on the map. It doesn't works, so i think the specific 'div' and the 'render' function of svgContainer hide all others layers.

I try to replace the svg container of example and add my svg file with a simple function

 import ImageLayer from 'ol/layer/Image';
    import Static from 'ol/source/ImageStatic';
    const imageLayer = new ImageLayer({
      source: new Static({
        url: 'datas/RDC.svg',
        imageExtent: [-180, -337, 284, 180], // Définissez les 
    coordonnées d'étendue appropriées pour votre SVG
      }),
    });

It's works (in this case i can saw my two layers) but the SVG is static, so it is blurred when i'm zooming in.

So i would like to have the svg loaded like the example, to have all calculations for zooming and no resolution lost, but with the ability to add some layers on it, like a simple Waypoint for example.

Globally, if you could show me how to add this : https://openlayers.org/en/latest/examples/icon.html

on this : https://openlayers.org/en/latest/examples/svg-layer.html

as a layer, it will be very cool !

Thank you so much,

Raynoxis

[ahocevar]

Instead of using ol/source/ImageStatic, use ol/source/Image with ol/source/static's createLoader() function and ol/source/Image's load loader:

import ImageLayer from 'ol/layer/Image';
import ImageSource from 'ol/source/Image';
import {createLoader as createStatic} from 'ol/source/static';
import {load} from 'ol/Image.js';

const imageLayer = new ImageLayer({
  source: new ImageSource({
    loader: createStatic({
      url: 'datas/RDC.svg',
      imageExtent: [-180, -337, 284, 180],
      load,
    }),
  }),
});

This will work like ol/source/ImageStatic, but without making the image blurry. See https://codesandbox.io/p/sandbox/svg-layer-forked-5ry6rp.

[Raynoxis]

Hello,

Thank you so much, everything is OK with your solution !

Your code could be the new example for a local SVG file.

Thank you,

Tchuss

[ahocevar]

Your code could be the new example for a local SVG file.

It could be an additional example - the current one enables interactions with the svg.