How to use SVG as a custom marker?

plotly.js
1

Hi :raised_hand_with_fingers_splayed:
I need to use custom markers on a scatter plot. Exactly this icon, not “something like that”.

So I dug around this forum and found some topics with similar problems of using custom markers. I’ve tried some of the proposed solutions. One of them - is to use images as markers. It would seem to work fine, but if I zoom plot SVG kind of becomes rasterized and looks like a low-quality jpeg (see screenshot).

Dear community and Plotly developers! We loved this library, it’s very helpful for our project, but it’s a crucial moment for us to use custom markers. Please help us to find any solution to this issue. I also tried to use UTF characters as markers, but I didn’t find that character (circle with crossed arrows).

I am hoping for your help! :sparkling_heart:

map
map1128×620 161 KB

2

A few questions, when you zoom does the image increase/decrease? Do you want the image size to remain fixed when you zoom? Are you using a .svg file? Could you put the code?

3

  1. I want the size of the custom marker (SVG image in my case) to remain the same if I zoom plot.

  2. Yes, I’m sure that I’m using SVG (I’ll attach a screenshot, you can see how clear the borders of the icon are)

  3. My code (I’m using Array.map to get an array of images):

    code
    code733×389 35.5 KB

vertical_wells.x.map((x, index): Partial => ({
source: window.location.origin + ‘/well-type-2.svg’,
xref: ‘x’,
yref: ‘y’,
x: oilFieldMapState.vertical_wells.x[index] || 0,
y: oilFieldMapState.vertical_wells.y[index] || 0,
sizex: 500,
sizey: 500,
visible: true,
xanchor: ‘center’,
yanchor: ‘middle’,
layer: ‘above’,
sizing:‘fill’,
}))

My zoomed SVG:

svg
svg861×689 15.2 KB