SVG Tutorial: Basic Examples

, , …,

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

line

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

rectangle

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

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 separater 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>

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

more complex svg

the following are all just made of above primitives. You can use your web browser's wed dev tools to look at the source code.

image/svg+xml xyz
blog comments powered by Disqus