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

ellipse

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

For the math of ellipse, see: Ellipse.

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. Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)#FillRuleProperty

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>

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

SVG Style Sheet

SVG: Specifying Styles

Reference

Basic Shapes – SVG 1.1 (Second Edition)

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. ViewBox Unit Size
  10. Coordinate Transformation
  11. Text Element
  12. Font Size
  13. Structure Elements
  14. Scripting SVG
  15. SVG Clock
  16. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Like it? Help me by telling your friends. Or, 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 in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog