SVG guides

This page lists guides for SVG.

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.
Linking: The target attribute on the SVG a element doesn't work in Mozilla Firefox 1.5. When SVG documents are embedded within a parent HTML document using the tag:
Namespaces crash course: As an XML dialect, SVG is namespaced. It is important to understand the concept of namespaces and how they are used if you plan to author SVG content. 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: One can override default browser behaviors with the evt.preventDefault() method, add event listeners to objects with the syntax element.addEventListener(event, function, useCapture), and set element properties with syntax like svgElement.style.setProperty("fill-opacity", "0.0", ""). Note the existence of all three arguments setting properties.
SVG animation with SMIL: Synchronized Multimedia Integration Language (SMIL) is an XML-based language for writing interactive multimedia presentations. Authors can use SMIL syntax in other XML-based languages to define the timing and layout of elements for animation. SMIL allows you to:
SVG as an image: SVG images can be used as an image format, in a number of contexts. Browsers support SVG images in:
SVG filters: SVG allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters. With the filter element <filter> it is possible to add these effects and later on attach them to an object.
SVG in HTML introduction: This article and its associated example shows how to use inline SVG.