🏠 back to Observable

help parsing SVG path into JSON of coordinates

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

In this notebook 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).

This library shows a technique that could work for you:

1 Like

I sketched out a quick notebook example also if that helps: SVG Path to Coordinates / Observable / Observable

1 Like

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

Can’t wait to see it!

Here are some techniques you could use:

2 Likes

@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 :smiley:

1 Like