openlayers: SVG ol.style.Icon does not render in some browsers

Issue: When using an ol.style.Icon with an inline SVG source, it will render correctly in Chrome and Safari, but will not appear in Firefox, Edge, or IE11.

Example: https://jsfiddle.net/kk32q47q/1/ Note: I also demonstrate an ol.style.Circle icon as well as manually inserting an SVG into the DOM. Both work correctly.

Expected behavior: Renders a black SVG square icon on the map.

Actual behavior: Doesn’t render the SVG square in Firefox, Edge, or IE11.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

Thanks for the hint. Do you have a source for this? I don’t find anything about this and is didn’t change the effect.

But it helped me to find the problem: firefox rejected the src and didn’t load any image. After some research I found the reson and solution for this:

Some browser care “more” about a valid URI. Just placing the <svg>...</svg> inside the src attribute violates the encoding. See this article and a live demo. As you can see chrome loads the example with invalid encoding just fine.

The same applies to our problem. Just encode the svg into valid UTF8!

img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg)

See also the updated fiddle: https://jsfiddle.net/kk32q47q/12/

Sidenote: even with correct encoding the original svg from @dtreiter makes problems.

aAXEe on Nov 12, 2016