SVG Reference

Shapes:

  • <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.
  • <g></g> (group)
  • <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.
  • <path />
    • d="[see table below]"
  • <polygon />
    • points="p1, p2, p3, ... , pN"
  • <polyline />
    • points="p1, p2, p3, ... , pN"
  • <rect />
    • 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.
  • <text></text>
    • x, y - The x and y attributes determine where in the viewport the text will appear.

Fill and Stroke Attributes:

  • fill: {color}
  • fill-opacity: {0 → 1, percentage}
  • stroke: {color}
  • stroke-dasharray: {none, dasharray}
  • stroke-dashoffset: {percentage, length}
  • stroke-linecap: {butt, round, square}
  • stroke-linejoin: {arcs, bevel, miter, miter-clip, round}
  • stroke-opacity: {0.0 → 1.0}
  • stroke-width: {length, percentage}

<path d="" />

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 dy Arc

References

Examples:

SVG