SVG Tutorial: Basic Examples

, , …,
Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS 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>

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.

SVG Styles

SVG: Shape Styles

blog comments powered by Disqus