🏠 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?

Example:
M114.74550841905119,0L141.84387276771997,81.91579298366908L141.89702805719216,81.9199147316549L159.7169988918881,72.15078819584468L171.29161856762454,59.83100335159669L176.96184152663844,44.0712514647294L174.79337202091088,24.99995184176221L166.40937378886125,0Z

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.