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.


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

Here's example of complete html file:

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

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



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

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" …>


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


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

For the math of ellipse, see: Ellipse.


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

If the lines made by the points intersect each other, you can use the style fill-rule to specify how inside/outside is determined. Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)#FillRuleProperty


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


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


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

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 Path Tutorial

SVG Path Tutorial

SVG Style Sheet

SVG: Specifying Styles


Basic Shapes – SVG 1.1 (Second Edition)

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc