3. Rectangle
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
x The x position of the top left corner of the rectangle.
y The y position of the top left corner of the rectangle.
width The width of the rectangle
height The height of the rectangle
rx The x radius of the corners of the rectangle
ry The y radius of the corners of the rectangle
Circle
<circle cx="25" cy="75" r="20"/>
r The radius of the circle.
cx The x position of the center of the circle.
cy The y position of the center of the circle.
4. Ellipse
<ellipse cx="75" cy="75" rx="20" ry="5"/>
rx The x radius of the ellipse.
ry The y radius of the ellipse.
cx The x position of the center of the ellipse.
cy The y position of the center of the ellipse.
Line
<line x1="10" x2="50" y1="110" y2="150"/>
x1 The x position of point 1.
y1 The y position of point 1.
x2 The x position of point 2.
y2 The y position of point 2.
5. Polyline
<polyline points="60 110,60 120, 90 150, 120 120, 120 110" />
points A list of points, each number separated by a space,
comma, EOL, or a line feed character. Each point must contain
two numbers, an x coordinate and a y coordinate. So the list
(0,0), (1,1) and (2,2) could be written: "0 0, 1 1, 2 2"
Polygon
<polygon points="60 110,60 120, 90 150, 120 120, 120 110" />
points A list of points, each number separated by a space,
comma, EOL, or a line feed character. Each point must
contain two numbers, an x coordinate and a y coordinate.
So the list (0,0), (1,1) and (2,2) could be written: "0 0, 1 1, 2
2". The drawing then closes the path, so a final straight line
would be drawn from (2,2) to (0,0).
6. Path
<path d="M150 0 L75 200 L225 200 Z" />
d A list of commands.
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
Note: All of the commands above can also be expressed with
lower letters. Capital letters means absolutely positioned,
lower cases means relatively positioned.
7. Path
<path d="M10 10 H 90 V 90 H 10 L 10 50 " fill="transparent" stroke="black"/>
L x y (or l dx dy) – line to x,y coordinate
H x (or h dx) V y (or v dy) – vertical or horizontal line
<path d="M10 10 H 90 V 90 H 10 L 10 50 Z" fill="transparent" stroke="black"/>
Z draws a straight line from your current position back to the
first point that started the path
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
8. Path
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
The last set of coordinates here (x,y) are where you
want the line to end. The other two are control points.
(x1,y1) is the control point for the start of your curve,
and (x2,y2) for the end point of your curve. If you are
familiar with algebra or calculus, the control points
essentially describe the slope of your line starting at
each point.
9. Path
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black"
fill="transparent"/>
S x2 y2, x y (or s dx2 dy2, dx dy)
S produces the same type of curve as earlier, but if it
follows another S command or a C command, the first
control point is assumed to be a reflection of the one
used previously. If the S command doesn't follow
another S or C command, then it is assumed that both
control points for the curve are the same.
10. Path
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
Q x1 y1, x y (or q dx1 dy1, dx dy)
quadratic Bezier, it takes two arguments, the control
point and the end point of the curve
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
T x y (or t dx dy)
produces the same type of curve as earlier, if follows
another Q command or a T command, the control point
is assumed to be a reflection of the one used previously.
If the T command doesn't follow another T or Q
command, then it is assumed that control point and
start point for the curve are the same.
11. Path
<path d="M10 315 L 110 215
A 30 50 0 0 1 162.55 162.45 L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9 L 315 10"
stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
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
Arcs are sections of circles or ellipses. For a given x-
radius and y-radius, there are two ellipses that can
connect any two points (as long as they're within the
radius of the circle). Along either of those circles there
are two possible paths that you can take to connect the
points, so in any situation there are four possible arcs
available. The final two arguments designate the x and y
coordinates to end the stroke at.
12. Colors and Lines
<rect x="10" y="10" width="100" height="100"
stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
Fill sets the color inside the object and stroke sets the color of the
line drawn around the object.
Fill-opacity and stroke-opacity attributes specify the opacity of
either the fill or stroke separately in SVG.
<line x1="40" x2="120" y1="20" y2="20" stroke-width="20" stroke-linecap="butt"/>
<line x1="40" x2="120" y1="60" y2="60" stroke-width="20" stroke-linecap="square"/>
<line x1="40" x2="120" y1="100" y2="100" stroke-width="20" stroke-linecap="round"/>
Stroke-width property defines the width of this stroke, the stroke is
distributed evenly on both sides of the path.
Stroke-linecap property controls the shape shown at the end of lines.
#MyRect:hover {
stroke: black;
fill: blue;
}
13. Colors and Lines
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
fill="none" stroke-linejoin="miter"/>
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
fill="none" stroke-linejoin="round"/>
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
fill="none" stroke-linejoin="bevel"/>
Stroke-linejoin attribute controlled the joint where the two meet.
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red" stroke-width="1" stroke-dasharray="5,5" />
stroke-dasharray attribute takes as an argument a series of comma
separated numbers. Each of the numbers specifies a distance for
first the filled area, and then for the unfilled area.
16. Text
<text x="10" y="10" text-anchor ="start" >Hello World!</text>
The x and y attributes determine, where in the viewport the text will appear.
The attribute text-anchor, which can have the values start, middle, end or inherit, allows to decide,
in which direction the text flows from this point.
<text>
<tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
x Set a new absolute x coordinate for the containing text. This overwrites the default current text
position. The attribute may also contain a list of numbers, that are one by one applied to the single
characters of the tspan element.
dx Start drawing the text with a horizontal offset dx from the default current position. Here, too, you
may provide a list of values that are applied to consecutive characters, hence piling up the offset
over time.
Likewise there are y and dy for vertical displacement.
rotate Rotate all charactes by this degree. A list of numbers makes each character rotate to its
respective value, with remaining characters rotating according to the last value.
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
<textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>
