<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="209px" height="110px" x="0" y="0" viewBox="0 0 209 110">
<title>A Simple Rectangle</title>
<desc>
A turquoise rectangle with a black border that is wider than it is tall.
</desc>
<a xlink:href="index.html">
<rect x="20" y="20" height="100" width="200" rx="5" ry="5" style="fill: turquoise; stroke: #333333;"/>
</a>
</svg>
M or m = moveto (x,y)
L or l = lineto (x,y)
A or a = arc (rx,ry x-axis-rotation large-arc-flag,sweep-flag)
C or c = curveto (Cubic Bezier Curve)
S or s = curveto (Smooth or Shorthand Cubic Bezier Curve)
Z or z = closepath
Equal rx and ry mean a circular arch, different mean ellipses
x-axis-rotation sets the rotation of the arches. Always should be 0.
large-arc-flag is a true or false value (0 or 1)
sweep-flag is also a 0 or 1 value. Clockwise (1) or Counter-Clockwise (0)
x,y is where to draw the arc to from its reference point (based on capital A or lowercase a)
Cubic Bezier Curve
C x1,y1 x2,y2 x,y
S x2,y2 x,y
A cubic Bezier curve is defined by four points. Two are endpoints. The origin endpoint is either absolute or relative depending on the lowercase or uppercase “c”. (x,y) is the destination endpoint. The points (x1,y1) and (x2,y2) are control points.
In a Shorthand or Smooth Cubic Bezier Curve, the start control point is is assumed to be the same as the end control point of the previous curve.
What’s up with the decimals and dashes?
The following description of the grammar for path data uses Extended Backus-Naur Form [EBNF] (In computer science, Extended Backus–Naur Form (EBNF) is a family of metasyntax notations, any of which can be used to express a context-free grammar.):
The processing of the EBNF must consume as much of a given EBNF production as possible, stopping at the point when a character is encountered which no longer satisfies the production. Thus, in the string 'M 100-200', the first coordinate for the "moveto" consumes the characters "100" and stops upon encountering the minus sign because the minus sign cannot follow a digit in the production of a "coordinate". The result is that the first coordinate will be "100" and the second coordinate will be "-200".
Similarly, for the string 'M 0.6.5', the first coordinate of the "moveto" consumes the characters "0.6" and stops upon encountering the second decimal point because the production of a "coordinate" only allows one decimal point. The result is that the first coordinate will be "0.6" and the second coordinate will be ".5".
The Pools
Women have often been seen appearing in 1930’s style swimming suits wandering the decks near the first class swimming pool (now closed).
Sounds of splashing heard and wet footprints seen.
A little girl named Jackie supposedly drowned in the second class poolroom. Her voice, as well as the sounds of laughter have been reportedly heard here.
/* CSS doesn't work in IE */
rect {
transform: rotate(45deg);
}<!-- HTML works everywhere -->
<rect x="65" y="65" width="150" height="80" transform="rotate(45)" />
