SVG Cheatsheet By Dominique Hazael-Massieux 0 50 100 200 300 0 100 200 300 Rectangle <rect/> Attributes of the rect element x="50" y="100" width="200" height="150" stroke-width="10" stroke="red" fill="none" Ellipse <ellipse/> Attributes of the ellipse element cx="400" cy="375" rx="100" ry="75" fill="#EEEE00" Line <line/> Attributes of the ellipse element x1="500" y1="50" x2="600" y2="150" stroke="orange" Polyline <polyline/> Attribute points of the polyline element points="600,200… 650,300 700,250 800,300" Polygon <polygon/> Attribute points of the polygone element points="400,200… 430,170 460,170 490,200 460,230 430,230" Paths <path/> Cubic Bezier curves path element with d attribute describing cubic Bezier curves d="M100,475 C Move Cubic Bezier -20,375 Controlpoint #1 50,295 Controlpoint #2 100,345" Destination Arcs path element with attribute d describing an arc and a line d="M100,675 A100754501100,525L100,675" Arcradius Xradius YRotation axis xSmall arcClockwiseArc endLine toLine end 45° 100radius x 75radius y Text Hello World <text/> Attributes of the text element x="1000" y="500" text-anchor="end" font-size="4em" font-family="Helvetica"