Use SVG icon as marker in OpenLayers
12,673
Solution 1
Here is an example that shows inline SVG in an icon symbolizer: http://jsfiddle.net/eze84su3/
Here is the relevant code:
var svg = '<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
+ '<circle cx="60" cy="60" r="60"/>'
+ '</svg>';
var style = new ol.style.Style({
image: new ol.style.Icon({
opacity: 1,
src: 'data:image/svg+xml;utf8,' + svg,
scale: 0.3
})
});
A few differences from yours:
- I added
width
andheight
attributes to the<svg>
. This lets the browser know how big to make the resulting image. - I added a
scale
property to the icon to resize the image. - I used
utf8
instead ofbase64
encoding (not significant).
Solution 2
To me, the solution was:
const iconMarkerStyle = new ol.style.Icon({
src: './data/static_images/marker.svg',
//size: [100, 100],
offset: [0, 0],
opacity: 1,
scale: 0.35,
//color: [10, 98, 240, 1]
})
Then add size parameters directly in the SVG file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.81 215.81" width="14.5px" height="21.6px">
<title>Asset 190-SVG</title>
</svg>
Author by
Alexlionnel Sieyadjeu
Updated on July 18, 2022Comments
-
Alexlionnel Sieyadjeu almost 2 years
I tried to svg icon as marker in Openlayers-3. Here in my code.
var svg = '<?xml version="1.0"?>' + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">' + '<circle cx="60" cy="60" r="60"/>' + '</svg>'; var style = new ol.style.Style({ image: new ol.style.Icon({ opacity: 1, src: 'data:image/svg+xml;base64,' + btoa(svg) }) });
But my svg image is truncated,as shown in the following picture. ( the icon should be a circle)
-
Alexlionnel Sieyadjeu almost 8 yearsThanks for the answer. But why viewBox parameter is not working?
-
Husky over 3 yearsThis works, but does have a couple of caveats because browsers tend to have issues with some of the characters used in SVG, like the double quotes, newlines, and spaces. I found it more reliable to first convert the SVG to Base64 (using
window.btoa
) and then including it asdata:image/svg+xml;base64,
followed by your base 64 encoded image.