SVG Markers Icons

Maybe a solution?
The famous “SVG Support” plugin offers an intersting option:

For advanced use: Enable the « Advanced Mode » under Settings > SVG Support.

With advanced mode enabled, you can embed your SVG images just like you would a standard image with the addition of adding (in text view) the class “style-svg” (or the custom class you defined) to your IMG tags that you want this plugin to swap out with your actual SVG code.

For example:

img class=style-svg alt=alt-text src=image-source.svg
or
img class=your-custom-class alt=alt-text src=image-source.svg

The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.
This allows you to target elements within your SVG using CSS and JS.

You can remove all other attributes from the IMG tag as it will disappear anyway.

There’s a setting to automatically add your class to the IMG tag for you when you’re inserting SVG’s in to a post or page, which also removes unnecessary tags.
Since 2.3.11, you can force all SVG files to be rendered inline with a single checkbox. Additionally, you can now choose whether to use the minified or expanded version of the JS file.

This plugin can automatically add a CSS class to each added SVG in the media library. But unfortunately this option does not work on my site currently. I can ask the question to their support if you want.

But you may have a better alternative?

Maybe a solution?
The famous “SVG Support” plugin offers an intersting option:

For advanced use: Enable the « Advanced Mode » under Settings > SVG Support.

With advanced mode enabled, you can embed your SVG images just like you would a standard image with the addition of adding (in text view) the class “style-svg” (or the custom class you defined) to your IMG tags that you want this plugin to swap out with your actual SVG code.

For example:

img class=style-svg alt=alt-text src=image-source.svg
or
img class=your-custom-class alt=alt-text src=image-source.svg

The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.
This allows you to target elements within your SVG using CSS and JS.

You can remove all other attributes from the IMG tag as it will disappear anyway.

There’s a setting to automatically add your class to the IMG tag for you when you’re inserting SVG’s in to a post or page, which also removes unnecessary tags.
Since 2.3.11, you can force all SVG files to be rendered inline with a single checkbox. Additionally, you can now choose whether to use the minified or expanded version of the JS file.

This plugin can automatically add a CSS class to each added SVG in the media library. But unfortunately this option does not work on my site currently. I can ask the question to their support if you want.

But you may have a better alternative?

Hello Kiran,

Thank you very much for your help. Unfortunately yes you’re right it moves the icon SVG.

But I found a better solution that I share here: you have to specify the size of the .SVG in the file itself!

For example, replace:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56.673 56.673" style="enable-background:new 0 0 56.673 56.673;" xml:space="preserve">

by

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="45px" width="45px" viewBox="0 0 56.673 56.673" style="enable-background:new 0 0 56.673 56.673;" xml:space="preserve">

Now the icon is placed correctly on the map, and especially Firefox and Internet Explorer DISPLAY the icon. Without specifying the size in the .svg file, the icon did not appear on Firefox for example 😉

Thanks again for your help Kiran, I did not know the CSS code you told me, it could be useful for other things 😉