Scalable Vector Graphics. — Making Software

SVG describes shapes, paint and coordinate systems as structured text that a browser can style, animate and render at any size. The apparent simplicity comes from a set of carefully chosen representations, transformations and physical assumptions working together.

The viewBox

An internal coordinate system lets one drawing scale into many physical sizes.

This is one part of a longer chain: markup becomes geometry becomes paint becomes pixels. The useful abstraction hides the physical work, but the underlying constraints still shape the software built above it.

Paths

Compact commands describe lines, curves and arcs inside a single shape.

The implementation is full of compromises. Precision, speed, storage and energy rarely improve together, so practical systems choose the errors people are least likely to notice.

A document model

SVG elements participate in the DOM, making them addressable with CSS and JavaScript.

Once this layer is visible, familiar design conventions stop looking arbitrary. They are accumulated responses to the capabilities and limits of the machinery below.