Xah Web Dev Tutorials
Practical SVG Tutorial
By Xah Lee. Date:
2012
. Last updated:
2026-08-23
.
This tutorial is simple, practical, example based.
In 1 hour, you will understand the basic structure of SVG and can start to use JavaScript to create SVG.
Search 🔍
SVG
SVG Basics
Path
Path Elliptical Arc
Circle Arc
Specifying Styles
Shape Styles
Viewport
viewBox
ViewBox Unit Size
Coordinate Transformation
Text Element
Font Size
Structure Elements
SVG: JavaScript Scripting
🕑
SVG Clock
Animation
Canvas Intro
Canvas vs SVG (2010)
Canvas intro
Demo: Halma
Demo: Raycaster