การใช้ SVG กับ Leaflet Icon

ดูเป็นวิธีที่ดีใช้ได้เพราะว่าจะได้ marker ที่มีหน้าตาแบบปรับเปลี่ยนได้ง่ายๆ กว่าอย่างอื่น

var CustomIcon = L.Icon.extend({.....});
var svgrect = "<svg xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='20' height='10' fill='#5a7cd2'></rect><rect x='0' y='15' width='20' height='10' fill='#5d52cf'></rect></svg>";
var url = encodeURI("data:image/svg+xml," + svgrect).replace('#','%23');
var rectIcon = new CustomIcon({iconUrl: url});
L.marker([52, -0.09], {icon: rectIcon}).bindPopup("I am data URI SVG icon.").addTo(map);

For data URI SVG support in Firefox & IE it’s necessary to URI encode the string & replace the ‘#’ character with ‘%23’. encodeURI() won’t do this which is why replace() must be used on the string afterwards.