# How to create custom symbols from existing SVG path
**URL:** https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229
**Category:** Help
**Created:** [August 1, 2019, 6:08pm UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229 "2019-08-01T18:08:46Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [August 1, 2019, 6:08pm UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229/1 "2019-08-01T18:08:46Z")
@mbostock Sometimes I design custom symbols in SVG typically using Inkscape (here is an example: [https://resources.cisnet.cancer.gov/projects/#crcr/uspstf/explorer](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](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?
---
### Author:  [@bchoatejr](https://talk.observablehq.com/u/bchoatejr)
#### Post date: [August 2, 2019, 1:52am UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229/2 "2019-08-02T01:52:24Z")
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.
> **[Scatterplot with Symbols](https://observablehq.com/@bchoatejr/scatterplot-with-symbols)**
>
> An Observable notebook by bchoatejr.
---
### Author:  [@mbostock](https://talk.observablehq.com/u/mbostock)
#### Post date: [August 2, 2019, 2:31am UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229/3 "2019-08-02T02:31:27Z")
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:
> **[Path-to-Canvas](https://observablehq.com/@mbostock/path-to-canvas)**
>
> An Observable notebook by Mike Bostock.
---
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [August 8, 2019, 1:12am UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229/4 "2019-08-08T01:12:56Z")
Thank you @mbostock and @bchoatejr. This answers my question.
---
### Author:  [@Jasper](https://talk.observablehq.com/u/Jasper)
#### Post date: [October 27, 2021, 11:36pm UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229/5 "2021-10-27T23:36:11Z")
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?
---
### Author:  [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [July 3, 2024, 1:25pm UTC](https://talk.observablehq.com/t/how-to-create-custom-symbols-from-existing-svg-path/2229/6 "2024-07-03T13:25:38Z")
A post was split to a new topic: [Custom symbols in Plot](https://talk.observablehq.com/t/custom-symbols-in-plot/9466)