Introduction – general knowledge

SVG, an XML markup language, is designed to describe two-dimensional vector graphics. The SVG markup language resides in the DOM as a node that describes exactly how to draw a shape (a curve, line, circle, and polygon). Just like HTML, SVG tags can also be styled from standard CSS. Note that, because all commands reside in the DOM, the more shapes you have, the more nodes you have and the more work for the browser. This is important to remember because, as SVG visualizations become more complex, the less fluidly they will perform.

The main SVG node is declared as follows:

<svg width="200" height="200"></svg>

This node's basic properties are width and height; they provide the primary container for the other nodes that make up a visualization. For example, if you wanted to create ten sequential circles in a 200 x 200 box, the tags would look like this:

<?xml version="1.0"?>
<svg width="200" height="200">
  <circle cx="60" cy="60" r="50...