Basic Document

If you are new to SVG, then it is a good idea to familiarize yourself with an SVG document's basic structure.

Basic Document

Shapes

Examples showing how to create basic SVG shapes using:

SVG

JavaScript and the DOM

Text

Examples showing how to create basic text using:

SVG

JavaScript and the DOM

Animation

Examples showing how to create basic animations using:

SVG and SMIL

JavaScript and the DOM (using SMIL elements)

JavaScript and the DOM (integer - does not match SMIL)

JavaScript and the DOM (parametric - matches SMIL)

Events

Examples showing how to create mouse events, keyboard events, document events, animation events, and more

Mouse Events - SMIL

Mouse Events - Attributes

Mouse Events - JavaScript+SMIL

Mouse Events - EventListener

Keyboard Events

Document Events

Animation Events

Other Events

Filters

Some filter-related samples

feColorMatrix - Brightness and Contrast

feComponentTransfer - Brightness and Contrast

Transformations

Some transform-related samples

Tracking the Mouse

Mouse coordinates to User coordinates

The following example combines these two examples and properly compensates for all viewBox and preserveAspect ratio settings: viewBox.svg

Miscellaneous

Some samples that don't fall into a specific catagory

Finding the Document Element

Finding the Root Element

Playing Sound

The Use element