🏠 back to Observable

How to create custom symbols from existing SVG path

@mike 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/cross.js) 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.

1 Like

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 @mike and @bchoatejr. This answers my question.