SVG uses a coordinate system where (0, 0) is the top-left corner. The viewBox attribute defines the visible area in user-space units.
viewBox
viewBox="0 0 800 600"
preserveAspectRatio
Unlike canvas, SVG is retained-mode — every element lives in the DOM and can be styled, animated, and inspected individually.
SVG provides six shape primitives:
<rect>
<circle>
<ellipse>
<line>
<polyline>
<polygon>
The <path> element is the most powerful — its d attribute uses commands:
<path>
d
Lowercase commands use relative coordinates.
fill sets interior color; stroke sets the outline.
fill
stroke
stroke-width
stroke-dasharray
stroke-linecap
stroke-linejoin
Gradients and patterns are defined in <defs> and referenced via fill="url(#id)".
<defs>
fill="url(#id)"
Transform functions applied via the transform attribute:
transform
translate(x, y)
rotate(angle)
scale(sx, sy)
skewX(a)
skewY(a)
matrix(a,b,c,d,e,f)
Transforms compose right-to-left. Use <g> to group children under a shared transform.
<g>
SVG filters are pixel-processing pipelines defined in <filter>:
<filter>
<feGaussianBlur>
<feColorMatrix>
<feTurbulence>
<feDisplacementMap>
<feComposite>
<feMerge>
Primitives connect via result, in, and in2 attributes.
result
in
in2
Three approaches to SVG animation:
<animate>
<animateTransform>
<animateMotion>
@keyframes
animation
requestAnimationFrame
<symbol>
<use>
<clipPath>
<mask>
<marker>
SVG is retained-mode — each element is a DOM node you can style, animate, and attach events to. It scales to any resolution.
Canvas is immediate-mode — you draw pixels and they're gone. Better for thousands of sprites or pixel manipulation.
SVG excels at diagrams, charts, icons, and moderate element counts. Canvas wins for particle-heavy or pixel-level rendering.