SVG Reference
Absolute (UPPERCASE) Relative (lowercase)  
M x y m dx dy Move To
L x y l dx dy Line To
H x h dx Horizontal Line
V y v dy Vertical Line
Z z Close Path
C x1 y1, x2 y2, x y c dx1 dy1, dx2 dy2, dx dy Cubic Bezier Curve
S x2 y2, x y s dx2 dy2, dx dy Multiple Cubic Bezier Curves
Q x1 y1, x y q dx1 dy1, dx dy Quadratic Bezier Curve
T x y t dx dy Multiple Quadratic Bezier Curves
A rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx d Arc

Shapes:

  • <circle />
  • <ellipse />
  • <g></g> (group)
  • <line />
  • <path /> (d="")
  • <polygon /> (points="")
  • <polyline /> (points="")
  • <rect />
  • <text></text>
Rectangle:
x, y - The x and y position of the top left corner of the rectangle.
width - The width of the rectangle.
height - The height of the rectangle.
rx, ry - The x and y radius of the corners of the rectangle.
Circle:
r - The radius of the circle.
cx, cy - The x and y position of the center of the circle.
Ellipse:
rx, ry - The x and y radius of the ellipse.
cx, cy - The x and y position of the center of the ellipse.
Line:
x1, y1 - The x and y postion of point 1 of a line.
x2, y2 - The x and y postion of point 2 of aline.
Text:
x, y - The x and y attributes determine where in the viewport the text will appear.

Fill and Stroke Attributes:

  • fill
  • fill-opacity
  • stroke
  • stroke-opacity
  • stroke-width
  • stroke-linecap
  • stroke-linejoin
  • stroke-dasharray

Examples:

SVG