How are we supposed to handle the Elliptical Arc commands?

I have an open source SVG renderer which really struggles to render these. Your elliptical arc commands by looks of things do not follow the SVG spec, elliptical arcs should contain 7 parameters as its command, these icons vary from 5-10, These only seem to render inside browsers and Sketch, Illustrator, IconJar all cant render these correctly.

Command like : a8 8 0 100-16 8 8 0 000 16 is completely invalid according to the SVG spec.

How is this supposed to be parsed? is it 8 8 0 100 -16 8 0 then 0 0 0 16? But then 16 would have to be a 1 or a 0 for the sweeping arc.

Cheers.

[wolfgang42]

This arc command is correct and standards-conformant SVG; your renderer (and presumably Illustrator and IconJar) just isn’t parsing it properly. See SVG 1.1 §8.3.9 for an exhaustive grammar, but the gist of it is that you can condense a lot. Relevant for this particular case are the following rules:

• flags are always exactly one character (0/1)
• Whitespace can be left out wherever it’s not absolutely necessary (including after flags and before negative numbers and leading decimal points)
• If a command letter is not given, it’s the same as the previous command (except in the case of M/m, where it’s L/l instead)

That is, the string a8 8 0 100-16 8 8 0 000 16 should parse as two arc commands:

“a”	nonnegative-number	comma-wsp?	nonnegative-number	comma-wsp?	number	comma-wsp	flag	flag	coordinate-pair
a	8		8		0		1	0	0 -16
	8		8		0		0	0	0   16

svg/svgo#1137 discusses this same problem, and offers some optimizations that can be turned off to work around the Illustrator bugs.

[wolfgang42]

Glad I could help! I spent a lot of time figuring this stuff out for a project and I’m happy to see that the effort I spent is useful 😃