Getting Down with ...

by ...

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.

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

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

Table of Contents