It's like an HTML document for digital drawings instead of content
Unicode characters
Elements, tags, and attributes
Nesting
Bitmaps, anchors (a.k.a. links), text
AND Shapes, paths, opacity, gradients, rotation, animation
A Simple SVG & Her Attributes
<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>
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 or c = curveto (Cubic Bezier Curve)
S or s = curveto (Smooth or Shorthand 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".
In Browser Action!
CSS can do a lot, but cannot animate paths (control the "d" attribute)
