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:
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
.element {
transform: translateY(-2px);
transform: translateX(10px);
transform: rotate(45deg);
}
CSS Units Requirement
transform: translateY(-2px);
transform: translateY(-2);
Note: -2px means "2 units in viewBox coordinates", not screen pixels
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;
}
.element {
transform-origin: center;
transform-box: fill-box;
}
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:
.line {
transform: translateY(-2px);
}
Animation Strategy
The Hard vs Easy Parts
Hard: Structuring SVG for animation (grouping, coordinates)
Easy: Adding the actual animation (transitions)
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
<svg viewBox="25 25 50 50">
<svg viewBox="50 0 100 100">
<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
Transform origin confusion: Default is viewBox (0,0), not element center
CSS units required: Must use px even for SVG coordinates
Browser support: transform-box has issues
Groups vs individuals: Some properties only work on individual shapes
Coordinate calculation: Manual math required for complex origins
