How to create custom symbols from existing SVG path

@mbostock Sometimes I design custom symbols in SVG typically using Inkscape (here is an example:

I’d like to add some symbols to extend the ones included in d3.symbol (e.g. but that would seem to require quite a bit of effort to encode the SVG. Is there a way to convert a SVG symbol snippet into something that would work with d3.symbol?


Or maybe I don’t need to do this and can use the SVG directly?

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.


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 it should be easier to replicate them in SVG rather than creating a custom symbol for d3.symbol.

That said, here’s a simple converter from SVG path data to Canvas:

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?