The S in SVG stands for Scalable, while V stands for Vector. These are the two important parts of the name. This allows us to be able to apply a variety of transforms prior to the rendering of SVG shapes.

Each SVG shape is represented by one or more vectors, where a vector in SVG is a tuple (x, y) distance from an origin in the coordinate system. As an example, a rectangle will be represented by four 2D vectors, one for each corner of the rectangle.

When creating graphical visualizations, this modeling of data with vectors has several benefits. One of those is that we can define a shape around a coordinate system for just that shape. Modeling this way allows us to make copies of the shape, but position them in different places in a larger image, rotate them, scale them, and perform many other operations beyond the scope of this text.

Secondly, these transformations are applied on the model before being rendered into pixels on the screen. Because of this, SVG can ensure...