SVG guides

This page lists guides for SVG, covering topics such as embedding, MIME (media) types, handling scripts, animations, filters, and more.

Applying effects with SVG filters

SVG filters take the pixels an element would have painted and process them before they reach the screen: blurring, offsetting, recoloring, compositing, or generating new imagery altogether. They can be chained into multi-step pipelines, and they apply to both SVG and HTML content.

Applying SVG effects to HTML content

You can use 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

SVG allows for three kinds of linking:

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 SVG with JavaScript

SVG elements are part of the DOM, so the DOM APIs you might already be using with HTML, such as Document.querySelector, EventTarget.addEventListener, and Element.setAttribute, work on SVG too. This guide covers the parts that are specific to SVG:

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.

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 in HTML introduction

This article and its associated example shows how to use inline SVG.