This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

SVG tutorials

Summary

A list of SVG tutorials.

Autoscaling SVG
This tutorial explains how to make an SVG image that scales automatically to fill the available area.
SVG deployment
This brief guide shows different ways to deploy SVG, either within HTML or as standalone files, with various options to reference CSS and JavaScript.
SVG filters
This guide shows you how to build SVG image processing filters to create interesting visual effects. It shows how to apply these effects within an SVG graphic, and how to apply them to HTML content using the filter CSS property.
SVG graphic effects
This guide shows you how to embed images within SVG and apply various graphics effects such as gradients, patterns, clipping paths, and masks.
SVG interaction
This guide contains nothing, and should be deleted.
SVG grand tour
This guide shows you how to build a pair of animating eyeballs, providing a comprehensive tour of SVG features detailed in other tutorials. It shows how to maintain a set of reusable graphic components, and provides essential context on SVG transforms and coordinate spaces.
SVG basic shapes and text
This guide introduces SVG’s basic graphic elements, from simple lines and shapes to complex polygons and freehand paths. It also shows how to place lines of text and wrap it around curved paths.
Smarter SVG: text
This guide shows how to embed text in your SVG content.
Building SVG paths
This article looks deeply into the SVG <path> element, which is used to create custom shapes.
Understanding CSS filter effects
This article is an introduction to CSS filter effects.
External content in SVG
This article covers using external content inside SVG images, such as external image files, and XML data.
Fills and strokes in SVG
This article shows how to add fills and strokes to the SVG shapes you have drawn.
Position and Transformation
This article is an overview of the coordinate system, positioning and performing translations, transforms, rotation, skewing, scaling on SVG elements.

Scripting SVG
:

SVG clipping and masking
This article explains how clipping and masking work in SVG.
SVG filters
CSS custom filters go way beyond the image-processing capabilities of CSS’s pre-defined filter effects, allowing you to bend, fold, spindle, and mutilate otherwise flat web content.
SVG fonts
This article covers the creation and usage of SVG fonts.
SVG gradients
This article looks at filling SVG shapes with linear and radial gradients.
SVG image element
This article describes the usage of the SVG image element
SVG links
This tutorial covers the creation of links inside SVG objects.
SVG pattern fills
This article covers SVG pattern fills.
SVG syntax and deployment
This article shows the basic syntax and usage of SVG.
Understanding pixels and other CSS units
This guide looks into the relationship between CSS pixels and other units, as well as between CSS and device pixels.
Using text in SVG
This article details how to insert text into an SVG image.

SVG basics

Advanced SVG

More SVG