Colored SVG icons in Leaflet - svg

Question

I have added a SVG icon to leaflet as follows:
var myIcon = L.icon({
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z"/></svg>`,
});
this.myMarker = L.marker([50.505, 30.57], { icon: myIcon }).addTo(map);
It is showing up as expected:
Now, when you add color to the SVG as follows, the icon disappears in the map:
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z" fill="#fdbf00"/></svg>`,
Any thought about this?

Answer 1

I prepared an example instead of iconUrl I used html Then you can easily use colors in hex ;)
// config map
let config = {
minZoom: 7,
maxZomm: 18,
};
// magnification with which the map will start
const zoom = 13;
// co-ordinates
const lat = 52.237049;
const lon = 21.017532;
// calling map
const map = L.map('map', config).setView([lat, lon], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const svgTemplate = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="marker">
<path fill-opacity=".25" d="M16 32s1.427-9.585 3.761-12.025c4.595-4.805 8.685-.99 8.685-.99s4.044 3.964-.526 8.743C25.514 30.245 16 32 16 32z"/>
<path fill="#F7FADA" stroke="#000" d="M15.938 32S6 17.938 6 11.938C6 .125 15.938 0 15.938 0S26 .125 26 11.875C26 18.062 15.938 32 15.938 32zM16 6a4 4 0 100 8 4 4 0 000-8z"/>
</svg>`;
const icon = L.divIcon({
className: "marker",
html: svgTemplate,
iconSize: [40, 40],
iconAnchor: [12, 24],
popupAnchor: [7, -16]
});
const marker = L.marker([lat, lon], {
icon: icon
})
.bindPopup('#F7FADA')
.addTo(map);
* {
margin: 0;
padding: 0
}
html {
height: 100%
}
body,
html,
#map {
height: 100%;
margin: 0;
padding: 0
}
body {
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<div id="map"></div>
Modified #IvanSanche example below
var map = new L.Map('leaflet', {
layers: [
new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
var myIcon = L.icon({
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z"/></svg>`,
});
var myIcon2 = L.icon({
iconUrl: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 512 512"><path d="M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.931 0 521.286 151.707 491.481 394.785 224 387.814z" fill="%23fdbf00" stroke="red" /></svg>`,
});
this.myMarker = L.marker([50.505, 30.57], { icon: myIcon }).addTo(map);
this.myMarker2 = L.marker([50.505, 130.57], { icon: myIcon2 }).addTo(map);
body {
margin: 0;
}
html, body, #leaflet {
height: 100%
}
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /><div id="leaflet"></div>