1

Please tell me how to use svg for icons in OpenLayers? What structure should svg have?

We have encountered several problems when using svg and have prepared an example:

  1. It is impossible to correctly change the color of the image using the "color" property (example with Green Smile and RedSmile)

  2. Images are not displayed if you remove the link to the standard "xmlns="http://www.w3.org/2000/svg "" (example with Yellow Smile). Why doesn't it work?

Thank you for the answers!

Виктория
  • 21
  • 3
  • To make it clear, the problem is that the color property changes the background of the svg and not the lines (path)? – Dorin Botan Jan 27 '22 at 16:13
  • 2
    To color only the faces you would need to replace the white rect with a circle https://codesandbox.io/s/hardcore-goldberg-8q2du?file=/src/App.js – Mike Jan 27 '22 at 16:35
  • Thanks! It works! Tell me, please, do you know what is the cause of problem number 2? I need to remove the links in the svg description, but without them the icons are not displayed =( – Виктория Jan 28 '22 at 08:30

1 Answers1

2

As mentioned in the ol/style/Icon docs, the color property adds a "tint" to the icon. This is done to add support for jpg and png icons. What it means, is that the color is mixed into the icon color.

In your example, since all paths are black -> black + red = black, and the background is white -> white + red = red. If you want to color the lines only, remove the fill property from <rect> and fill all <path> white.

This is how the new icon would then look:

    let greenIcon =
  '<svg width="148" height="117" viewBox="0 0 148 117" fill="none" xmlns="http://www.w3.org/2000/svg">' +
  '<rect width="148" height="117"/>' +
  '<path d="M86.5833 55.833C90.0351 55.833 92.8333 53.0348 92.8333 49.583C92.8333 46.1312 90.0351 43.333 86.5833 43.333C83.1316 43.333 80.3333 46.1312 80.3333 49.583C80.3333 53.0348 83.1316 55.833 86.5833 55.833Z" fill="white"/>' +
  '<path d="M57.4167 55.833C60.8685 55.833 63.6667 53.0348 63.6667 49.583C63.6667 46.1312 60.8685 43.333 57.4167 43.333C53.9649 43.333 51.1667 46.1312 51.1667 49.583C51.1667 53.0348 53.9649 55.833 57.4167 55.833Z" fill="white"/>' +
  '<path d="M72 76.6663C65.8333 76.6663 60.5417 73.2913 57.625 68.333H50.6667C54 76.8747 62.2917 82.9163 72 82.9163C81.7083 82.9163 90 76.8747 93.3334 68.333H86.375C83.5 73.2913 78.1667 76.6663 72 76.6663ZM71.9583 18.333C48.9583 18.333 30.3333 36.9997 30.3333 59.9997C30.3333 82.9997 48.9583 101.666 71.9583 101.666C95 101.666 113.667 82.9997 113.667 59.9997C113.667 36.9997 95 18.333 71.9583 18.333ZM72 93.333C53.5833 93.333 38.6667 78.4163 38.6667 59.9997C38.6667 41.583 53.5833 26.6663 72 26.6663C90.4167 26.6663 105.333 41.583 105.333 59.9997C105.333 78.4163 90.4167 93.333 72 93.333Z" fill="white"/>' +
  "</svg>";
Dorin Botan
  • 1,224
  • 8
  • 19
  • Thanks! It works! Tell me, please, do you know what is the cause of problem number 2? I need to remove the links in the svg description, but without them the icons are not displayed =( – Виктория Jan 28 '22 at 08:29
  • 1
    **xmlns** imports the svg namespace. E.g. `` is not an HTML tag and therefore needs to be linked to. Modern web browsers are smart enough to render svg without it, but, by standard it needs to be included. – Dorin Botan Jan 28 '22 at 17:28