SVG Reference

SVG basic shapes, paths, transforms, and animations guide

Basic Shapes

 x="10" y="10" width="100" height="50"  # rectangle
 cx="50" cy="50" r="40"  # circle
 cx="50" cy="50" rx="40" ry="20"  # ellipse
 x1="0" y1="0" x2="100" y2="100"  # straight line
 points="50,10 90,90 10,90"  # triangle

Path Commands

 d="
  M 10 10 # move to
  L 100 100 # line to
  H 200 # horizontal line
  V 50 # vertical line
  C 20 20, 40 20, 50 10 # cubic bezier
  Q 95 10, 100 50 # quadratic bezier
  Z"  # close path

Transforms

transform="translate(50, 100)" # move element
transform="rotate(45)" # rotate degrees
transform="scale(1.5)" # resize
transform="skewX(20)" # skew horizontal
transform="rotate(45 50 50)" # rotate around point

Styling

fill="#ff0000" # fill color
stroke="#000" # border color
stroke-width="3" # border thickness
opacity="0.5" # transparency
fill-opacity="0.7" # fill transparency
stroke-dasharray="5,5" # dashed line

Animations


  attributeName="cx" # property to animate
  from="50" to="200" # start and end
  dur="2s" # duration
  repeatCount="indefinite"  # loop forever


  attributeName="transform"
  type="rotate" # transform type
  from="0 50 50" to="360 50 50"