# help parsing SVG path into JSON of coordinates

**URL:** <https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993>\
**Category:** Help\
**Created:** [April 28, 2021, 9:20pm UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993 "2021-04-28T21:20:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [April 28, 2021, 9:20pm UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/1 "2021-04-28T21:20:12Z")

</div>

Hi, I’m trying to parse a SVG with paths into their coordinates (in order to use with deck.gl).

In this [notebook](https://observablehq.com/@cornhundred/allen-brain-atlas-svg-test) I am fetching a SVG from an API but I’m unclear how I can parse the SVG paths at this point and save the paths as coordinates (something like a GEOJSON).

---

<div class="post-metadata">

**Author:** ![shancarter](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shancarter/32/3471_2.png) [@shancarter](https://talk.observablehq.com/u/shancarter)\
**Post date:** [April 29, 2021, 12:40am UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/2 "2021-04-29T00:40:25Z")

</div>

This library shows a technique that could work for you:

> **[spotify/coordinator](https://github.com/spotify/coordinator/)**
>
> A visual interface for turning an SVG into XY coördinates.

---

<div class="post-metadata">

**Author:** ![shancarter](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shancarter/32/3471_2.png) [@shancarter](https://talk.observablehq.com/u/shancarter)\
**Post date:** [April 29, 2021, 12:58am UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/3 "2021-04-29T00:58:16Z")

</div>

I sketched out a quick notebook example also if that helps: [SVG Path to Coordinates / Observable / Observable](https://observablehq.com/@observablehq/svg-path-to-coordinates)

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [April 29, 2021, 3:17pm UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/4 "2021-04-29T15:17:06Z")

</div>

Thanks @shancarter! I’ll update here when I have a deck.gl plot of the regions using the coordinates.

---

<div class="post-metadata">

**Author:** ![shancarter](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shancarter/32/3471_2.png) [@shancarter](https://talk.observablehq.com/u/shancarter)\
**Post date:** [April 29, 2021, 4:44pm UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/5 "2021-04-29T16:44:53Z")

</div>

Can’t wait to see it!

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 29, 2021, 10:26pm UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/6 "2021-04-29T22:26:09Z")

</div>

Here are some techniques you could use:

> **[Fourier Series - Path Sampling](https://observablehq.com/@mbostock/fourier-series-path-sampling)**
>
> When computing the Fourier series of a two-dimensional path, it makes a difference how you sample the points! That’s because the series isn’t simply reconstructing the path: it’s reconstructing a parametric function . If you change how varies along...

---

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [April 30, 2021, 2:59am UTC](https://talk.observablehq.com/t/help-parsing-svg-path-into-json-of-coordinates/4993/7 "2021-04-30T02:59:24Z")

</div>

@shancarter I updated the notebook to parse through all the SVG paths (it is confusing to find all the paths, but I stumbled upon how to get them all apparently) and display the coordinates using deck.gl - thanks for the help (it’s regions of the mouse brain from the Allen Brain Atlas)! @mbostock I look forward to trying to improve the path sampling - thanks for sharing the notebook 😃

 ![Screen Shot 2021-04-29 at 10.56.50 PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/7/7923a13f9b9b54097e3d5b0006a77eb3af6e76f5.jpeg)