SVG: Scalable Vector Graphics
Scalable Vector Graphics (SVG) is anXML-based markup language for describing two-dimensional basedvector graphics.
As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards includingCSS,DOM,JavaScript, andSMIL. SVG is, essentially, to graphics whatHTML is to text.
SVG images and their related behaviors are defined inXML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.
Compared to classic bitmapped image formats such asJPEG orPNG, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.
SVG has been developed by theWorld Wide Web Consortium (W3C) since 1999.
Tutorials
TheSVG 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 atInkscape's documentation page. Another good introduction to SVG is provided by the W3C'sSVG Primer. Also check out this advent calendar-themedSVG Tutorial that walks you through coding 25 festive SVGs.
Guides
TheSVG 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
TheSVG 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.