I've got 3 different SVGs that all display a marker. However only one of them works with the Openlayers icon. In this example only svg1 correctly displays the marker on the map. All three SVGs are correctly displayed when using an IMG element. What determines if a svg can be displayed by openlayers or what do i have to change to make it work?
var svg1 = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">' +
'<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>' +
'<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
var svg2 = '<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" enable-background="new 0 0 30 30" version="1.1"><g><title>Layer 1</title><path id="svg_1" d="m22.906,10.438c0,4.367 -6.281,14.312 -7.906,17.031c-1.719,-2.75 -7.906,-12.665 -7.906,-17.031s3.54,-7.907 7.906,-7.907s7.906,3.54 7.906,7.907z" fill="#156BB1"/></g></svg>';
var svg3 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#156BB1" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>';
var mysvg = new Image();
mysvg.src = 'data:image/svg+xml,' + encodeURIComponent(svg1);
var style = new Style({
image: new Icon({
img: mysvg,
imgSize: [30, 30]
})
});
Apparently the order and the parameters used are of importance for Openlayers. I've got svg3 working by using the following as svg wrapper.
<svg version="1.1" id="Layer_1" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
</svg>
Removing any of those parameters or changing the order resulted in the svg not showing on the map. Another issue was that the path values were not comma separated. That poses no issue with displaying it in an image but openlayers seems to require it at least for usage within an Icon.