@mbostock Sometimes I design custom symbols in SVG typically using Inkscape (here is an example: https://resources.cisnet.cancer.gov/projects/#crcr/uspstf/explorer ). I’d like to add some symbols to extend the ones included in d3.symbol (e.g. https://github.com/d3/d3-shape/blob/master/src/symbol/cro…

Hi john-clarke, I’ve been using the symbol tag. It’s a pretty easy way to cut and paste custom paths. But it doesn’t use the d3.shape library. Here’s an example. [image] Scatterplot with Symbols An Observable notebook by bchoatejr.

I agree with @bchoatejr ’s recommendation. Seems like a good use of the SVG Symbol and Use elements. d3.symbol would be more appropriate if you wanted to ensure that the visual weight of your symbols for a given value (when using graduated symbols) is comparable. If you’re using fixed-size symbols i…

Thank you @mbostock and @bchoatejr . This answers my question.

2+ years later, and this approach still holds water - thanks @bchoatejr for sharing this! @mbostock , do you have any sense of if/when performance within observable takes a hit with this approach? Is it in the hundreds, thousands of elements rendered? Is this an impossible question?

How to create custom symbols from existing SVG path

Community Help

Topic		Replies	Views
Custom symbols in Plot Community Help	5	238	July 4, 2024
Possible to draw a triangle chart instead of bars with D3? Community Help	1	431	July 12, 2021
Positioning tooltip on chart with symbols? Community Help	1	286	February 2, 2022
Adding path lines to SVG export New To Observable	2	156	January 5, 2024
Extending Observable Plot with D3 in Observable Framework Community Help	1	114	May 12, 2025

How to create custom symbols from existing SVG path

Related topics