SVG: Scalable Vector Graphics | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
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 JPEG or 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.
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.
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.
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.
Filters blur, offset, recolor, and combine the pixels an element paints, in SVG and in HTML content.
Modern browsers support using SVG within CSS styles to apply graphical effects to HTML content.
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 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.
There are several ways to create and manipulate SVG using JavaScript. This document describes event handling, interactivity and working with embedded SVG content.
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 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.
This article shows how to use inline SVG and includes examples for illustration.
The SVG reference documentation contains comprehensive information about elements, attributes, and DOM interfaces, and lists relevant specifications and standards documents.
The SVG elements used to construct, draw, and layout vector graphics.
The SVG attributes available that can be used to specify how an element should be handled or rendered.
The SVG DOM API for interacting with SVG using JavaScript.
This page was last modified on Nov 2, 2026 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.