
Convert SVG path string to point shape and draw with Processing - bryanrasmussen
http://processingjs.nihongoresources.com/svgparser/
======
TheRealPomax
For those who know my Primer on Bezier Curves
([https://pomax.github.io/bezierinfo](https://pomax.github.io/bezierinfo)):
this was one of several code explorations I wrote while working on font
parsing and generation in 2010, and directly lead to me starting work on
writing that primer. Seeing it suddenly pop up on HackerNews is... special.

It's amazing knowing that even silly exploratories from 2010, when the web was
so different, still manage to get people excited today.

~~~
TheRealPomax
(so, thank you @bryanrasmussen, I never thought I'd see this here)

------
philo23
Seems like Firefox doesn't like something about that SVG

> XML Parsing Error: unclosed token

The tags themselves look fine so I think it might be complaining about
something missing in the actual path string?

~~~
Freak_NL
It seems to have two bogus characters (U+0085) in its XML. One in the
<title>-tag right after _data:_. These are breaking the UTF-8 encoding.

~~~
TheRealPomax
fixed.

------
simonsarris
Something is odd about this example. The relative SVG path he gives as an
example is missing two segments in the B.

[https://codepen.io/simonsarris/pen/ORwoLA?editors=1010](https://codepen.io/simonsarris/pen/ORwoLA?editors=1010)

~~~
TheRealPomax
You just spotted an eight year old contextual feature. While the parser will
leave a path "open", only signalling an explicit "close" when it sees `z` or
`Z`, it still signals the start of a new path when it sees an `m` or `M`
somewhere mid-path. And that's why you're seeing closed shapes even though
there don't appear to be any in the original SVG:

There is no such thing as an "open path" in glyph outlines used in fonts
(which was the context of this exploratory), so whenever the parser signals a
"new path" signal, even when not preceded by a "close path" signal, that's
automatically a closed path and the receiver code I wrote treats it as such.

(The starting SVG string was a straight graphics instruction dump from a
OpenType-CFF glyph charstring, although I can't for the life of me remember
which typeface it came from... it's been a while)

