Embed Inkscape SVG as svg+xml to change color via CSS

Question

I created this SVG Icon with Inkscape: https://codepen.io/honk007/pen/Jjoeryp

I managed to embed simpler Icons directly into HTML so i could change colors via CSS like this:

.mydiv > circle {
    fill: #f00;
}

I tried to embed this Icon in all possible ways but its not displaying. I could embed it in base64 but then I can't change colors and I would like to change the fill: #5b4cdf; color dynamically.

When embeding via JS like this:

const svg_O = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 29"><defs><filter id="a" color-interpolation-filters="sRGB"><feFlood flood-opacity=".5" flood-color="#000"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation="1"/><feOffset/><feComposite in="SourceGraphic"/></filter></defs><path d="M22 12.4a10 10 0 01-6.2 9.3c-1.2.4-3.2 3.8-3.8 4.8-.7-1-2.6-4.3-3.8-4.8A10 10 0 1122 12.4z" fill="#efefef" filter="url(#a)"/><circle cx="12" cy="12.4" r="7" fill="#5b4cdf"/><path d="M14.5 12.2h1L12 9l-3.5 3.2h1V15h1.8v-2.1h1.4V15h1.8z" fill="#fff"/></svg>';  
const svgpin_O = encodeURI("data:image/svg+xml;utf-8," + svg_O).replace('#', '%23');

const icon_O = L.icon({
        iconUrl: svgpin_O,
        iconSize: [90, 101],
        iconAnchor: [45, 0]
    });

I get this:

<img src="data:image/svg+xml;utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2029%22%3E%3Cdefs%3E%3Cfilter%20id=%22a%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeFlood%20flood-opacity=%22.5%22%20flood-color=%22%23000%22/%3E%3CfeComposite%20in2=%22SourceGraphic%22%20operator=%22in%22/%3E%3CfeGaussianBlur%20stdDeviation=%221%22/%3E%3CfeOffset/%3E%3CfeComposite%20in=%22SourceGraphic%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d=%22M22%2012.4a10%2010%200%2001-6.2%209.3c-1.2.4-3.2%203.8-3.8%204.8-.7-1-2.6-4.3-3.8-4.8A10%2010%200%201122%2012.4z%22%20fill=%22#efefef%22%20filter=%22url(#a)%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212.4%22%20r=%227%22%20fill=%22#5b4cdf%22/%3E%3Cpath%20d=%22M14.5%2012.2h1L12%209l-3.5%203.2h1V15h1.8v-2.1h1.4V15h1.8z%22%20fill=%22#fff%22/%3E%3C/svg%3E">

And that is not displaying the icon inside a browser.

Is there a way to embed this Icon in a way to change the circle color dynamically via CSS?

Answer 1

You can change any SVG color using only one parent div class.

Check you update snippet is here: https://codepen.io/hardiksolanki/pen/eYmQepM

.svg_icon svg circle{
  fill: #f00 !important;
}

Answer 2

I managed to solve it based on this:

var iconSettings = {
        mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{mapIconColor}" stroke="#FFF" stroke-width="6" stroke-miterlimit="10" d="M126 23l-6-6A69 69 0 0 0 74 1a69 69 0 0 0-51 22A70 70 0 0 0 1 74c0 21 7 38 22 52l43 47c6 6 11 6 16 0l48-51c12-13 18-29 18-48 0-20-8-37-22-51z"/><circle fill="{mapIconColorInnerCircle}" cx="74" cy="75" r="61"/><circle fill="#FFF" cx="74" cy="75" r="{pinInnerCircleRadius}"/></svg>',
        mapIconColor: 'blue',
        mapIconColorInnerCircle: '#fff',
        pinInnerCircleRadius:48
    };


// icon normal state
var divIcon = L.divIcon({
    className: "leaflet-data-marker",
  html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
  iconAnchor  : [12, 32],
  iconSize    : [25, 30],
  popupAnchor : [0, -28]
});

https://codepen.io/honk007/pen/WNbYXad