SVG Path Generator

An SVG path is a string written in a compact drawing language and stored in the d attribute. Each command is a letter followed by coordinates: M moves the pen without drawing, L draws a straight line, C draws a cubic Bezier using two control points before the endpoint, Q draws a quadratic Bezier with a single control point, A draws an elliptical arc, and Z closes the current subpath back to its starting point. Uppercase letters take absolute coordinates in the user coordinate system, while the lowercase forms take coordinates relative to the current point, which makes a shape trivial to relocate. The viewBox attribute establishes that coordinate system: a viewBox of 0 0 100 100 means path coordinates run from 0 to 100 regardless of the rendered pixel size, so the drawing scales without any loss of fidelity. The generated shapes illustrate the common constructions. A full circle cannot be drawn with a single arc command, because the start and end points would coincide and the arc would be ambiguous, so it is built from two semicircular A commands, each with rx and ry equal to the radius plus the large-arc and sweep flags. A five-pointed star alternates outer and inner vertices at 36 degree steps, since 360 divided by five points and two vertices per point gives 36; the inner radius ratio controls how thin the points look, with roughly 0.38 producing the classical pentagram and larger values producing blunter stars. A heart is two mirrored cubic curves. Note that y increases downward in SVG, the opposite of standard mathematical convention, and that fill-rule matters for self-intersecting paths.

The underlying mathematics came from the automobile industry. Paul de Casteljau, working at Citroen from 1959, developed the recursive subdivision algorithm now named after him for describing car body surfaces, though Citroen kept the work confidential for years. Pierre Bezier, at Renault during the 1960s, arrived at an equivalent formulation and published it, which is why the curves carry his name rather than de Casteljau's. The command vocabulary that SVG uses came from printing rather than mathematics: Adobe's PostScript, released in 1984, described shapes with moveto, lineto, curveto, and closepath operators, and the letters M, L, C, and Z are direct descendants of those operators. SVG itself was a compromise between competing proposals. In 1998 the W3C received two vector graphics submissions: PGML, backed by Adobe, IBM, Netscape, and Sun and rooted in the PostScript imaging model, and VML, backed by Microsoft and others. The working group drew on both, and Scalable Vector Graphics 1.0 became a W3C Recommendation on 4 September 2001, with SVG 1.1 following in 2003 and a Second Edition in 2011. Browser support arrived unevenly - Firefox 1.5 in 2005 and Opera shipped native rendering, while Internet Explorer added SVG only in version 9 in 2011, which is why plugin-based rendering persisted for years afterward. Once support became universal, path data settled in as the standard format for icons, logos, and animated interface graphics.