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"