How do I use SVG icons for Custom Icon Marker in Folium?

Code Help Python
1

Question:
I’m using Python w/ Flask and I want to use SVG icons for Custom Icon Marker in Folium.
How would I make a marker with a custom icon from a SVG image?

Currently, If I try to use a SVG image as a custom marker, (and I know it is the correct path because I use the same SVG elsewhere) this shows:

image

BTW, thank you so much @Sky for introducing me to Folium!

1 Like
2

I don’t think Folium supports SVG.

Try to convert SVG to Data URL.

3

@WindLother How do I do this? Like if the path is static/imgs/traditional_cache.svg, how would I make a Data URL out of this?

4

Usually base64 is the way to go.

import base64

def svg_to_dataurl(path_to_svg):
    with open(path_to_svg, 'r') as f:
        svg = f.read()
    return "data:image/svg+xml;base64," + base64.b64encode(svg.encode('utf-8')).decode('utf-8')
5

Thanks for the help!
Quick question though: how do I make it so that when I tap on the marker, a panel shows up on the right of the screen that I can further alter to contain what I need and the styles I require?

6

I don’t see a easy way to do this.

You would need a bit of Javascript/CSS to use it along Folium.

You’ll need custom HTML for the right panel, CSS for styling, and JavaScript for the interactivity…

7

@WindLother I’m okay with doing some work :slight_smile:

BTW, I’m using Flask, so I have all of that down already (well most of it, not including the JS and panel CSS). I can do all the panel styling by myself for the most part, the biggest thing is that I’m not great at JS or Folium. If you could help with that that’d be great!