Since SVG is written in XML, remember this:

x y 0

Predefined shape elements:

Rectangle

x y width height rx ry
Attribute Description
width The width of the rectangle
height The height of the rectangle
x The x-position for the top-left corner of the rectangle
y The y-position for the top-left corner of the rectangle
rx The x radius of the corners of the rectangle (used to round the corners)
ry The y radius of the corners of the rectangle (used to round the corners)
<rect width="75" height="75" />
<rect width="150" height="75" />
<rect width="75" height="75" x="10" y="10" />
<rect width="75" height="75" x="10" y="10" rx="20" ry="20" />
fill="blue"
style="fill:blue;"
fill="blue"
stroke="red"
style="fill:blue;stroke:red;"
fill="blue"
stroke="red"
stroke-width="5"
style="fill:blue;stroke:red;stroke-width:5;"
fill="blue"
stroke="red"
stroke-width="5"
opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;opacity:0.3;"
fill="blue"
stroke="red"
stroke-width="5"
fill-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.3;"
fill="blue"
stroke="red"
stroke-width="5"
stroke-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;stroke-opacity:0.3;"

Circle

cx cy r
Attribute Description
r The radius of the circle
cx The x-axis center of the circle. Default is 0
cy The y-axis center of the circle. Default is 0
<circle r="50" />
<circle r="50" cx="100" cy="100" />
fill="blue"
style="fill:blue"
fill="none"
stroke="red"
stroke-width="5"
style="fill:none;stroke:red;stroke-width:5;"
fill="blue"
stroke="red"
stroke-width="5"
style="fill:blue;stroke:red;stroke-width:5;"
fill="blue"
stroke="red"
stroke-width="5"
opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;opacity:0.3;"
fill="blue"
stroke="red"
stroke-width="5"
fill-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.3;"
fill="blue"
stroke="red"
stroke-width="5"
stroke-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;stroke-opacity:0.3;"

Ellipse

cx cy rx ry
Attribute Description
rx The x radius of the ellipse
ry The y radius of the ellipse
cx The x-axis center of the ellipse. Default is 0
cy The y-axis center of the ellipse. Default is 0
<ellipse rx="60" ry="40" />
<ellipse rx="60" ry="40" cx="100" cy="100" />
<ellipse rx="40" ry="60" cx="100" cy="100" />
<ellipse rx="50" ry="50" cx="100" cy="100" />
fill="blue"
style="fill:blue"
fill="none"
stroke="red"
stroke-width="5"
style="fill:none;stroke:red;stroke-width:5;"
fill="blue"
stroke="red"
stroke-width="5"
style="fill:blue;stroke:red;stroke-width:5;"
fill="blue"
stroke="red"
stroke-width="5"
opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;opacity:0.3;"
fill="blue"
stroke="red"
stroke-width="5"
fill-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.3;"
fill="blue"
stroke="red"
stroke-width="5"
stroke-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;stroke-opacity:0.3;"

Line

x1 y1 x2 y2
Attribute Description
x1 The start of the line on the x-axis
y1 The start of the line on the y-axis
x2 The end of the line on the x-axis
y2 The end of the line on the y-axis
stroke
<line x2="150" y2="150" stroke="black" />
<line x1="50" y1="100" x2="150" y2="100" stroke="black" />
<line x1="100" y1="50" x2="100" y2="150" stroke="black" />
stroke="red"
stroke-width="5"
style="fill:blue;stroke:red;stroke-width:5;stroke-opacity:0.3;"
stroke="red"
stroke-width="5"
stroke-opacity="0.3"
style="fill:blue;stroke:red;stroke-width:5;stroke-opacity:0.3;"

Polyline

x,y x,y x,y x,y <polyline points= "x,y x,y x,y x,y ... " />
Attribute Description
points The list of points of the polyline. Each point must contain an x coordinate and a y coordinate
<polyline points="20,20 60,20 60,60 100,60 100,100 140,100 140,140 180,140 180,180" fill="blue" stroke="red" stroke-width="4" />

Path

Attribute Description
d A set of commands which define the path

Command Description
M moveto (move from one point to another point)
L lineto (create a line)
H horizontal lineto (create a horizontal line)
V vertical lineto (create a vertical line)
C curveto (create a curve)
S smooth curveto (create a smooth curve)
Q quadratic Bézier curve (create a quadratic Bézier curve)
T smooth quadratic Bézier curveto (create a smooth quadratic Bézier curve)
A elliptical Arc (create a elliptical arc)
Z closepath (close the path)
Note: All of the commands above can also be expressed in lower case. Upper case means absolutely positioned, lower case means relatively positioned

Absolute positioned

x,y M x,y L x,y L Z <path d="M x,y L x,y L x,y ... Z" />

Relative positioned

x y m x y l x y l z <path d="m x,y l x,y l x,y ... z" />

Simple Path

<!-- Absolute positioned -->
<path d="M 20,180 L 100,20 L 180,180 Z" fill="blue" stroke="red" stroke-width="3" />
<!-- Relative positioned -->
<path d="m 20,180 l 80,-160 l 80,160 z" fill="blue" stroke="red" stroke-width="3" />

M

<!-- Absolute positioned -->
<path d="M 50,100 L 150,100" />
<!-- Relative positioned -->
<path d="m 50,100 l 100,0" />

L

<!-- Absolute positioned -->
<path d="M 50,100 L 150,100 L 150,150" />
<!-- Relative positioned -->
<path d="m 50,100 l 100,0 l 0,50" />

H

<!-- Absolute positioned -->
<path d="M 50,100 H 150" />
<!-- Relative positioned -->
<path d="m 50,100 h 150" />

Horizontalna linija (X menjaš, Y ostaje isti)

V

<!-- Absolute positioned -->
<path d="M 100,50 V 150" />
<!-- Relative positioned -->
<path d="m 100,50 v 100" />

Vertikalna linija (Y menjaš, X ostaje isti)

Z

<!-- Absolute positioned -->
<path d="M 50,100 L 150,100 L 150,150 Z" />
<!-- Relative positioned -->
<path d="m 50,100 l 100,0 l 0,50 z" />

Spoji poslednju tačku sa prvom

C - Cubic Bézier curve (Kriva sa 2 kontrolne tačke)

x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />
x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />
x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />
x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />
x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />
x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />
x1,y1 x2,y2 x,y x3,y3 <path d=" M x,y C x1,y1 x2,y2 x3,y3" />

S

POJAŠNJENJE <!-- Absolute positioned -->
<path d="M 25,100 C 75,50 125,150 175,100" />
<!-- Relative positioned -->
<path d="m 50,100 l 100,0 l 0,50 z" />

koristi simetričnu kontrolnu tačku u odnosu na prethodnu

Q - Quadratic Bézier curve

x,y x1,y1 x2,y2 <path d="M x,y Q x1,y1 x2,y2" />
x,y x1,y1 x2,y2 <path d="M x,y Q x1,y1 x2,y2" />
<!-- Absolute positioned -->
<path d="M 25,175 Q 100,25 175,175" />
<!-- Relative positioned -->
<path d="m 25 175 q 75 -150 150 0" />

Kriva sa jednom kontrolnom tačkom

T - Smooth quadratic Bezier

<!-- Absolute positioned -->
<path d="M 20,100 Q 60,50 100,100 T 180,100" />
<!-- Relative positioned -->
<path d="m 20,100 q 40,-50 80,0 t 80,0" />

koristi automatsku kontrolnu tačku simetričnu u odnosu na prethodnu

A - Elliptical Arc
rx Poluprečnik elipse po X osi
ry Poluprečnik elipse po Y osi
x-axis-rotation Rotacija elipse u stepenima oko tačke (x, y)
large-arc-flag 0 (luk < 180°), 1 (luk ≥ 180°)
sweep-flag 0 (luk ide suprotno kazaljci), 1 (luk ide u pravcu kazaljke)
x,y Krajnja tačka luka
rx ry rx ry M x,y x,y
M x,y x y rx ry <path d="M x,y A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y" />

<!-- Absolute positioned -->
<path d="M 50,100 A 50 50 0 0 1 150 100" />
<!-- Relative positioned -->
<path d="m 50,100 a 50 50 0 0 1 100 0" />
M x
y
A rx
ry
x-axis-rotation
large-arc-flag
sweep-flag
x
y
<path d="M 50,100 A 50 50 0 0 0 150 100" />
dx dy x y <text x="50" y="50" dx="30" dy="30" />

Radi za: text

transform="translate(0 50)"

transform="translate(50 0)"

transform="translate(50 50)"