
SVG Path Strings - 1wheel
http://roadtolarissa.com/blog/2015/02/22/svg-path-strings/
======
jessedhillon
I have never understood why, when it comes to the <path> element, the entire
definition of the path is shoved into one plain text attribute with its own
specification language. Why couldn't there have been special nodes like
<curve> <move> etc so that the path can be processed using standard DOM
traversal? As it is, anyone using paths in a programmatic way will invariably
end up writing error-prone parsing and composing logic to modify the `d`
attribute.

What am I missing? This seems like a major area for improvement.

~~~
aidos
I quite like it. And actually, if you think about it - they're semantically
different. In one case you're dealing if a set of different elements, in
another you have the definition of a single shape.

More than that though, I work with large svgs and if there were dom nodes for
all of the components, nothing would be able to render them :)

~~~
jessedhillon
> In one case you're dealing if a set of different elements, in another you
> have the definition of a single shape.

Sure, but this is just restating the problem so that the mental model fits the
facts. However you rationalize it, you're forced to deal with the situation
that you need your own parsing logic to work with SVGs. That's supposed to be
the problem that the choice of XML solves.

Apart from that, the contents of the `d` element are describing individual
components -- lines, curves, arcs -- which combine to compose one path. It's
not necessarily the case that they need to be treated as one elemental shape,
any more than the children of the <g> element are not considered to be
indivisibly part of a whole, but rather as individually manipulable components
which are organized by the <g> into groups/layers.

Why couldn't <path> be a similar principle of organization?

~~~
aidos
I guess I come at it from the point of view of the DOM, where a single shape
as a DOM node that can be styled makes the most sense. If you had a path with
child nodes as real DOM nodes things would get weird, because how do things
like contradicting fill styles work?

As I said in my other reply though, I'm just splitting hairs really.

As a user I think being able to specify the shape by just using the single d
attribute is nice. Maybe because it invokes warm childhood memories of using
turtle graphics back in the 80s :)

------
jameshart
Am I missing some sort of mathematical simplicity in the elliptical arc
specification, because it looks like an absolute mess; surely there must be
some mechanism that allows you to specify an elliptical arc between two points
using tangent definitions, bezier-style. As it is, there's a real mess there
where rotating the end point around the start point, you have to rotate the
elliptical axis in the opposite direction to maintain the same curve.

It looks like its one optimal scenario is in creating a rounded corner, which
I guess is the common use case - but the unpredictability of how the curve
changes if you move the end points without adjusting the corner radii seems to
be a significant downside.

~~~
1wheel
The implementations notes list another potential specification[1]. I'm
guessing it was avoided because it wouldn't follow the pattern of ending each
command with the new coordinates of the pen.

They were definitely considering the rounded corners use case; the details of
drawing a rect element with a path[2] make arcs sound much easier to use than
they actually are most of the time.

[1][http://www.w3.org/TR/SVG/implnote.html#ArcParameterizationAl...](http://www.w3.org/TR/SVG/implnote.html#ArcParameterizationAlternatives)

[2][http://www.w3.org/TR/SVG/shapes.html#RectElement](http://www.w3.org/TR/SVG/shapes.html#RectElement)

------
Uehreka
I'm getting some real Baader-Meinhof here. I just started making SVG path
animations at work and just checked them into mainline today.

I like the look of this tutorial, and I hope you make some more in-depth ones.
Piling through W3C specs is no fun, and I could really use some good tutorials
for when I need to get co-workers up to speed on SVG.

~~~
bshimmin
For anyone else thinking, "Uh, wasn't Baader-Meinhof a pretty decent German
film from a few years back?", this might help you:
[http://www.damninteresting.com/the-baader-meinhof-
phenomenon...](http://www.damninteresting.com/the-baader-meinhof-phenomenon/)

~~~
jameshart
For anyone else thinking, "Uh, wasn't Baader-Meinhof a far-left German
terrorist organization from the early 1970s?", this might help you:
[http://www.imdb.com/title/tt0765432/](http://www.imdb.com/title/tt0765432/)

~~~
bshimmin
Well, you'd think anyone who'd seen the film and thought it was decent would
remember it was a far-left German terrorist organisation! I feel like we may
have digressed.

