SVG Tutorial: Basic Examples

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

This page is a basic tutorial of SVG (Scalable Vector Graphics). This page shows basic examples of SVG drawing primitives.

For how to script SVG, see: JavaScript: Scripting SVG, Basic Example.

line

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

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>

ellipse

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

polygon

<svg width="100" height="100">
<polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1"
style="stroke: blue; fill: yellow;" />
</svg>

Note: the separator between numbers in “points” attribute can be either space or comma.

There must be even number of points. Each pair of points is a {x,y} coordinate.

The last point will be connected to the first point.

If the lines made by the points intersect each other, you can use “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>

Uppercase means absolute coordinates, lowercase means relative coordinates.

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

For more detail about path, see: SVG Path Tutorial.

SVG Style Sheet

SVG: Style Sheet

Reference

Basic Shapes – SVG 1.1 (Second Edition)

blog comments powered by Disqus