SVG: Scalable Vector Graphics
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional based vector 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 including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.
SVG images and their related behaviors are defined in XML 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 as {{Glossary("JPEG")}} or {{Glossary("PNG")}} , 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 the World Wide Web Consortium (W3C) since 1999.
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 an 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.