SVG: Scalable Vector Graphics | MDN
Tutorials
The SVG tutorials are designed to walk you through subjects assuming that you have no prior experience, starting from the basics and progressing to more advanced techniques.
- Introducing SVG from scratch
-
This tutorial aims to explain the internals of SVG and is packed with technical details. If you just want to draw beautiful images, you might find more useful resources at Inkscape's documentation page. Another good introduction to SVG is provided by the W3C's SVG Primer. Also check out this advent calendar-themed SVG Tutorial that walks you through coding 25 festive SVGs.
Guides
The SVG guides help you work with SVG on the web, covering topics such as embedding, MIME (media) types, handling scripts, animations, filters, and more.
- Applying SVG effects to HTML content
-
Modern browsers support using SVG within CSS styles to apply graphical effects to HTML content.
- Content type
-
SVG makes use of a number of data types. This article lists these types along with their syntax and descriptions of what they're used for.
- Namespaces crash course
-
Namespaces are essential to user agents that support multiple XML dialects. Browsers must be very strict; taking the time to understand namespaces now will save you from future headaches.
- Scripting
-
There are several ways to create and manipulate SVG using JavaScript. This document describes event handling, interactivity and working with embedded SVG content.
- SVG animation with SMIL
-
SMIL is an XML-based language for writing interactive multimedia presentations. Authors can use SMIL syntax in SVG to define the timing and layout of elements for animation.
- SVG as an image
-
SVG can be used as an image format in HTML, CSS, certain SVG elements, and via the Canvas API. This page lists the features where you can provide SVG as an image source.
- SVG filters
-
SVG supports filters so authors can apply effects such as a shadow or blur, or even merge the results of different filters.
- SVG in HTML introduction
-
This article shows how to use inline SVG and includes examples for illustration.
Reference
The SVG reference documentation contains comprehensive information about elements, attributes, and DOM interfaces, and lists relevant specifications and standards documents.
- SVG elements
-
The SVG elements used to construct, draw, and layout vector graphics.
- SVG attributes
-
The SVG attributes available that can be used to specify how an element should be handled or rendered.
- SVG DOM interface
-
The SVG DOM API for interacting with SVG using JavaScript.