SVG: Basic Examples

By Xah Lee. Date: . Last updated: .

SVG is XML. You can put any of the following SVG example in a HTML file, and open the file in browser.

line

<svg width="100" height="100">
<line x1="0" y1="0" x2="50" y2="10"
style="stroke:black" />
</svg>

Here is example of complete html file:

<!doctype html><html><head><meta charset="utf-8" />
<title>svg test</title>
</head>
<body>

<svg width="100" height="100">
<line x1="0" y1="0" x2="50" y2="10"
style="stroke:black" />
</svg>

</body>
</html>

rectangle

<svg width="100" height="100">
<rect x="9" y="0" width="30" height="80"
style="fill:green; stroke:blue; stroke-width:5" />
</svg>

2 optional attributes {rx,ry}, makes round corners. Their value can be different. If one is missing, the other has the same value. Max effective value is half of the corresponding x or y attribute's value.

<rect x="9" y="0" width="30" height="80" rx="15" ry="15" …>
<rect x="9" y="0" width="30" height="80" rx="15" ry="40" …>

circle

<svg width="100" height="100">
<circle cx="50" cy="50" r="50"
style="fill:yellow; stroke:blue; stroke-width:5" />
</svg>

See also: SVG: Circle Arc

ellipse

<svg width="100" height="100">
<ellipse cx="50" cy="50" rx="50" ry="30"
style="fill:yellow; stroke:red; stroke-width:5" />
</svg>

See also: SVG Path: Elliptical Arc

polygon

<svg width="100" height="100">
<polygon points="0 0, 40 20, 90 90, 10 70"
style="stroke: blue; fill: yellow;" />
</svg>

If the lines made by the points intersect each other, you can use the style fill-rule to specify how inside/outside is determined.

polyline

polyline is similar to polygon element, except the last point does not connect to the first.

text

cats 
<svg width="100" height="100">
<text x="10" y="20">cats</text>
</svg>

path

<svg width="100" height="100">
<path d="M 0 0 L 50 50 L 40 10 m 40 10 l 10 10"
style="stroke:black; fill:green"></svg>
M
moveto
L
lineto
m
moveto (coordinates relative to previous point)
l
lineto (coordinates relative to previous point)

path with Cubic Spline

path tag is the most versatile and most frequently used. It can be used to draw curves using bezier curves.

<svg width="100" height="100">
<path d="M 10 20 C 50 -15 90 45 10 80 L 60 80"
style="stroke:black; fill:none" />
</svg>

SVG Path Tutorial

SVG Style Sheet