What is SVG Tutorial?

SVG Tutorial (svg-tutorial.com) is a free, browser-based tutorial site that teaches you how to create and animate images in HTML using SVG. It is aimed at developers and learners who want to build SVG graphics by writing code rather than using a design tool, and it works through a numbered, step-by-step curriculum that moves from basic shapes to animation and interactivity.

What the site covers

The site organizes its lessons as a table of contents with numbered entries, so you can work through them in order or jump to a specific topic. Based on the published lesson list, the curriculum includes:

• Basic shapes — drawing fundamental SVG shapes
• viewBox — how to use the viewBox property
• Polygon and Polyline — using these elements
• Paths — drawing a basic path, plus quadratic and cubic Bézier curves, and arcs
• Transforms — rotating, translating, scaling, and transforming elements
• Animation — animating with CSS, adding hover animation, and animating along a path
• Text — adding text to SVG images
• Clipping and gradients — using clip-path and gradients
• JavaScript integration — building a live clock, adding interaction to elements, generating diagrams from JavaScript, and breaking an image into components

Several lessons are framed around drawing a complete figure — a gingerbread figure, a bear, and a snowflake — which suggests the teaching style pairs individual techniques with a small project to apply them.

Who it is for

This site fits you if:

• You want to code SVG directly in HTML rather than export it from a graphics editor
• You are comfortable with basic HTML and want to extend into SVG
• You learn best from short, sequential exercises rather than a reference manual
• You want to reach animation and JavaScript-driven interactivity, not just static shapes

It is less suited if you only need a quick syntax lookup — the numbered lesson format is built for working through material rather than searching.

How to use it

1. Start at the table of contents and begin with the basic shapes lesson.
2. Follow the numbered lessons in sequence, since later topics (paths, Bézier curves, transforms) build on earlier ones.
3. For each lesson, write the SVG into an HTML file and open it in a browser to see the result.
4. Use the project-based lessons (gingerbread figure, bear, snowflake) to combine techniques.
5. Move on to the animation and JavaScript lessons once static drawing feels comfortable.

Practical notes

The site describes itself as covering "everything from basic shapes to advanced animations and interactivity," and the lesson list supports that range. No pricing, account, or login requirements appear in the available site information, so treat access details as unconfirmed and check the site directly before relying on it.