viewBox: The Coordinate System
The viewBox attribute defines the internal coordinate system of an SVG. It takes four values: min-x min-y width height. The SVG element's width and height attributes define the physical dimensions on screen. viewBox defines the coordinate space inside. This allows you to design at any scale internally while rendering at any physical size externally — the magic of SVG's resolution independence.
preserveAspectRatio
When the viewBox aspect ratio doesn't match the physical dimensions, preserveAspectRatio controls how the content is scaled and aligned. It takes an alignment value (xMidYMid is default, like CSS object-fit: contain; object-position: center) and a meet-or-slice value. none stretches the content to fill — use this for backgrounds that must fill their container.
Transforms in SVG
SVG transforms use the same CSS transform functions but via an attribute: transform="translate(x,y) rotate(angle,cx,cy) scale(x,y) skewX(angle)". Multiple transforms chain left-to-right (unlike CSS which applies right-to-left). For pattern creation, patternTransform is particularly powerful — it transforms the entire tile grid including its repetition offset.
<!-- Rotate pattern grid 45° -->
<pattern id="diagonal-grid"
patternTransform="rotate(45)"
width="20" height="20"
patternUnits="userSpaceOnUse">
<path d="M20 0L0 0 0 20" fill="none" stroke="#6366f1" stroke-width="0.5"/>
</pattern>SVG Symbols: The Component System
<symbol> is SVG's reusable component system. Define a motif once inside a <symbol> element (which has its own viewBox), then instantiate it anywhere with <use href="#symbolId" x="..." y="..." width="..." height="..."/>. Each <use> can position and size the symbol independently. This is the most efficient way to build complex patterns from a single master shape.
Nested SVG Elements
SVG supports nested <svg> elements, each with its own viewBox and coordinate system. This enables a composition pattern where complex motifs are designed in their own coordinate space and placed within a parent SVG at any position and size. Nested SVGs are particularly useful for creating symmetrical motifs — design one quadrant, then mirror it four times.
Marker Elements: Arrowheads & Decorations
<marker> elements attach automatically to the endpoints and midpoints of lines, polylines, and paths. This is how SVG draws arrowheads — but markers can be any SVG shape. For patterns, markers enable lines with automatic, evenly-spaced decorations (diamonds, circles, ticks) without manually calculating every position. Set markerUnits="strokeWidth" for markers that scale with line thickness.
The xlink Deprecation
SVG 1.1 used xlink:href for all cross-references. SVG 2.0 deprecates XLink entirely, replacing it with a plain href attribute. All modern browsers support both. New SVG code should use plain href. Legacy patterns using xlink:href on <use> elements still work in all current browsers but should be migrated to avoid issues as XLink support is eventually removed.