Core Concepts

Coordinate vs Display Size

• Coordinate size (viewBox): The "drawing paper" dimensions -> viewBox="0 0 100 100"

• Display size (width/height): How many pixels it takes on screen -> width="200px"

• Key insight: Shapes use viewBox coordinates, SVG scales them to display size

Path Model

All SVG shapes start as paths (outlines) that get filled/stroked:

• fill = color inside the shape

• stroke = outline color

• stroke-width = outline thickness

Grouping with <g>

Basic Grouping

<g stroke="red" fill="none" stroke-width="2">
  <rect x="10" y="10" width="50" height="30" />
  <circle cx="50" cy="50" r="20" />
</g>

• Shared attributes apply to all children

• Like a "config wrapper" (similar to framer-motion patterns)

• Transforms applied to groups affect all children

CSS Transforms in SVG

Basic Transforms

.element {
  transform: translateY(-2px); /* Move up 2 units */
  transform: translateX(10px); /* Move right 10 units */
  transform: rotate(45deg); /* Rotate 45 degrees */
}

CSS Units Requirement

/* ✅ Correct -> CSS requires explicit units */
transform: translateY(-2px);

/* ❌ Invalid -> CSS won't accept unitless values */
transform: translateY(-2);

Note: -2px means "2 units in viewBox coordinates", not screen pixels

Transform Origins (The Tricky Part)

Default Behavior

• Default transform-origin in SVG = 0,0 (top-left of viewBox)

• NOT relative to the element being transformed!

Manual Coordinates

.lid {
  transform: rotate(120deg);
  transform-origin: 18px 8px; /* Exact viewBox coordinates */
}

• Must calculate exact coordinates where you want rotation center

• Pain to maintain if elements move

Transform Box (Better but Limited)

.element {
  transform-origin: center;
  transform-box: fill-box; /* Makes origin relative to element */
}

Options:

• view-box (default) -> relative to viewBox

• fill-box -> relative to element's filled area

• stroke-box -> includes stroke in calculation

Limitations:

• Poor browser support (Safari issues, Firefox stroke-box)

• Doesn't work with groups -> only individual shapes

CSS Transitions

Basic Animation

.element {
  transition: transform 0.2s;
}

.element:hover {
  transform: translateY(-5px);
}

Multiple Properties

.element {
  transition: transform 0.2s, fill 0.3s;
}

SVG Styling with CSS

What Works as CSS Properties

✅ Presentation attributes:

• stroke, fill, opacity, stroke-width

✅ Some geometry properties:

• x, y, cx, cy, r (limited browser support)

❌ Line-specific attributes:

• x1, y1, x2, y2 -> NOT valid CSS properties

Workaround for Unsupported Properties

Use transforms instead of direct coordinate changes:

/* Instead of changing y1, y2 coordinates */
.line {
  transform: translateY(-2px);
}

Animation Strategy

The Hard vs Easy Parts

1. Hard: Structuring SVG for animation (grouping, coordinates)

2. Easy: Adding the actual animation (transitions)

3. Annoying: Transform origins and coordinate calculations

Best Practices

• Group related elements with <g>

• Use transforms over direct coordinate changes

• Plan transform origins early

• Test across browsers (transform-box issues)

ViewBox Camera Effects

Basic Camera Movements

<!-- Zoom in: smaller viewBox area -->
<svg viewBox="25 25 50 50">

<!-- Pan right: move starting coordinates -->
<svg viewBox="50 0 100 100">

<!-- Wide shot: larger viewBox area -->
<svg viewBox="0 0 200 100">

Animation Potential

• Zoom effects by changing viewBox dimensions

• Pan by changing x,y coordinates

• Cinematic effects with smooth transitions

• Perfect for React/TS library development

Common Gotchas

1. Transform origin confusion: Default is viewBox (0,0), not element center

2. CSS units required: Must use px even for SVG coordinates

3. Browser support: transform-box has issues

4. Groups vs individuals: Some properties only work on individual shapes

5. Coordinate calculation: Manual math required for complex origins