How SVG Tutorial Explains SVG Paths and Curves
SVG Tutorial treats paths and curves as a progressive sequence: you first learn the <path> element and its d attribute, then move through quadratic Bézier curves, cubic Bézier curves, and arcs, applying each in a small drawing project. The material is aimed at people who already know basic SVG shapes and want to draw freeform outlines rather than rectangles and circles. If you are looking for a single reference page on path syntax, this is not it — the site teaches paths through numbered lessons that build on each other.
Where paths and curves sit in the tutorial
The site's table of contents places path work after the shape fundamentals, so the intended order is:
- Basic shapes (
rect,circle,ellipse,line) - The
viewBoxproperty polygonandpolyline- Basic paths
- Quadratic Bézier curves
- Cubic Bézier curves
- Arcs
- Transformations (rotate, translate, scale)
- Animation and interactivity
This ordering matters because each curve lesson assumes you can already read a d attribute and place an element on a coordinate system. Skipping straight to the Bézier lessons will work, but you will be reverse-engineering the coordinate conventions the earlier lessons establish.
Path basics: the d attribute
The basic path lesson introduces <path> as the element that draws arbitrary outlines, with all geometry expressed in the d attribute. The commands covered at this stage are the straight-line and move commands — moving the pen without drawing, and drawing line segments between points.
The practical takeaway from this lesson is that a path is a sequence of commands, each a letter followed by coordinates. Once you accept that model, the curve lessons are just additional command letters with different coordinate counts.
Quadratic Bézier curves
The quadratic lesson introduces the curve command that takes a control point and an end point. The teaching approach is visual: you see how moving the single control point bends the line, and how the curve always starts at the current pen position and ends at the specified end point.
This is the gentler of the two Bézier lessons because there is only one control point to reason about. It is the right place to build intuition for what "control point" means before the cubic lesson doubles the number of coordinates you have to track.
Cubic Bézier curves
The cubic lesson extends the same idea with two control points instead of one. The extra control point is what lets you shape both ends of the curve independently, which is why cubic curves are the standard choice for organic outlines — the site uses them in its drawing exercises for figures with rounded, asymmetric forms.
The key difference to hold onto: quadratic gives you one degree of shaping freedom, cubic gives you two. If a curve looks wrong, in the quadratic case you adjust one point; in the cubic case you decide which end is misbehaving and adjust the control point on that side.
Arcs
The arc lesson covers the command that draws a segment of an ellipse between two points. Arcs are the least intuitive path command because the same start and end points can produce four different curves depending on two flag values — the large-arc flag and the sweep flag.
The tutorial's value here is showing those flags in action rather than describing them abstractly. Expect to experiment: change a flag, watch the arc flip to the other side or take the long way around, and build a mental model from the results.
How the lessons connect to practice
The site does not teach paths in isolation. Several lessons are full drawing exercises that combine the commands above:
| Lesson | What it draws | Commands exercised |
|---|---|---|
| Basic path | A simple open outline | Move and line commands |
| Gingerbread figure | A filled figure with rounded parts | Curves combined with basic shapes |
| Bear | An animal illustration | Cubic curves for organic outlines |
| Snowflake | A symmetrical decorative shape | Paths plus rotation and translation |
| Clock | A working clock face | Paths, text, and JavaScript for live time |
The snowflake and clock lessons are where paths meet the transformation and scripting material, so they double as integration exercises rather than pure path practice.
Animation and interactivity on top of paths
Later lessons animate what you drew with paths. CSS animation, hover-triggered animation, and animating an element along a path all appear in the table of contents, along with JavaScript-driven interaction and generating SVG diagrams from JavaScript. If your goal is a static illustration, the path and curve lessons are sufficient. If you want motion, the path lessons are the prerequisite for the animation ones — you cannot animate along a path you cannot construct.
Who this sequence suits
- Good fit: you learn by drawing complete figures and want curves explained in the order you would actually use them.
- Weaker fit: you want a dense syntax reference for every path command in one place, or you need to look up a specific command without working through earlier lessons.
- Prerequisite: comfort with HTML and basic SVG shapes. The tutorial assumes SVG is embedded in HTML, and its framing is "code images in HTML with SVG."
To get the most out of it, work the lessons in order through the cubic curve lesson, then jump to whichever drawing exercise matches what you want to make. The arc lesson is worth doing even if you rarely use arcs, because the flag behavior is the part most people get wrong when they copy path data from elsewhere.