This is a little esoteric of a thing, I just needed to do it myself one time and found it confusing so I thought I’d do a whole video on it.
The thing is, not everything is a <path> in SVG. <path> is fantastic because it can be anything. But the syntax for it is just a bit more complex than any of the other shapes. So (maybe for that reason?) Illustrator always outputs the shapes in SVG with the most closely appropriate element. Rectangles are <rect>, other shapes made up of only straight lines are a <polygon>, or if it’s an open shape a <polyline>, etc.
That would be fine, except the DOM methods for those shapes vary. A path element has a method called getTotalLength() which lets you know how long the path is. That’s pretty cool and sometimes useful, but you can’t only do it on a <path>, no other element.
One reason you might want to know that length is because you intend to animate it so that the shape “draws itself” – a cool little design effect (collection of examples). You can do it in CSS, but it’s nice to use some JavaScript to apply that CSS so it animates the perfect distance every time.
So say you want to do that drawing effect, but the shape is a <polygon> so the JavaScript fails. You can turn that polygon into a path, without changing it visually, by simply adding a point to it that has bezier handle. As in, click with the Pen tool and drag so the handles come out and align the handles right along the line that’s already there. The existence of that point will make it a <path> in output.
If you do this a lot, there is a tool called Poly2Path that works, and doesn’t require that superfluous point.
Not sure if you know this now but… playing around I just found that you can also use Object->Path->Add Anchor Points to an element to make it a path in Illustrator.
Nice! I think the concept at work there is that there is no other way to describe, say, 5 points on a curved path other than a
<path>. If you had a rectangle going in Illustrator, and added an extra point, it would probably go from a<rect>to a<polygon>.Hey all,
I fiddled around in Illustrator a bit trying to remember where I had seen this.
With the shape selected, you can do Object -> Compound Path -> Make (CMD+8) and it will convert your shape into a path. (Screen cap at https://dl.dropboxusercontent.com/u/18132950/make-compound.png ) This will be reflected in the layer palette as well, if you have it open.
Then, when you save as SVG, you get the path elem in the code with no extra points. So if you wanted to go from a circle to a square, you’d be able to do it with the original four pretty smoothly.
(FWIW, I’m on CC 2014, but I think it’s been around for a few versions at least.)
You can also make some pretty cool things with compound path that you’d otherwise have to animate completely crazy-like. Imagine just rotating the object in this http://painteddigital.com/2010/illustrator-tip-compound-path/ as opposed to tyring to coordinate each of the “rays” around a common center.
I strongly recommend Jarek Foksa’s pathData polyfill for any primitive to path conversion.
Actually based on a svg 2 draft – unfortunately, this proposal is in draft state for quite some time …
Even though the main purpose of this script is to parse d attributes to an array of commands, its normalizing option can convert any svg primitive (line, polyline, polygon, circle, rect) to absolute cubic bézier commands.
So it’s pretty versatile for further path manipulations (changing starting M commands, reversing path directions etc.) and yet rather lightweight – compared to more sophisticated svg processing libraries.
Also described on stack overflow: SVG – Convert all shapes/primitives to .