Scalable Vector Graphics (SVG) is an XML graphics format for creating scalable images and animations for the web. SVG enables web developers to create high-quality graphics with precise structural and visual control. Using SVG allows you to create images on a web page that never pixelate and are easily edited right in the body of the page.

A simple analogy for SVG would be a very complicated game of connect the dots. SVG, instead of resizing the image and leaving you with a pixelated drawing, redraws the whole thing using the points and dimensions in the viewbox.

Note: This tutorial assumes you are already familiar with HTML. If you are not, you should read Getting Down with HTML before continuing.

This tutorial will help you get started using SVG inside web pages.