# SVG Component Library Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams. ## SVG Fundamentals ### Basic Structure ```xml ``` ### ViewBox Explained **Format:** `viewBox="min-x min-y width height"` **Example:** `viewBox="0 0 1200 800"` - **min-x, min-y:** Usually `0 0` (top-left origin) - **width, height:** Virtual coordinate system dimensions - SVG scales to fit container while maintaining aspect ratio - Larger viewBox = more space for content **Common Sizes:** ```xml ``` ### Coordinate System - **X-axis:** Left (0) to right (positive) - **Y-axis:** Top (0) to bottom (positive) - **Center of 1200×800 viewBox:** `(600, 400)` - **Units:** Relative to viewBox (not pixels) ## Basic Shapes ### Rectangle **Standard Rectangle:** ```xml ``` **Rounded Rectangle:** ```xml ``` - `rx`: Horizontal corner radius - `ry`: Vertical corner radius (defaults to `rx` if omitted) **Process Box with Text:** ```xml Process Name Subtitle ``` **Position Calculation:** - Text X: `rect.x + (rect.width / 2)` for center - Text Y: `rect.y + (rect.height / 2)` for vertical center (approximately) - Baseline adjustment: Add `5-10px` to Y for visual centering ### Circle **Basic Circle:** ```xml ``` - `cx, cy`: Center coordinates - `r`: Radius **Circle with Text (Start/End Node):** ```xml START ``` **Small Marker Circle:** ```xml ``` ### Ellipse ```xml ``` - `rx`: Horizontal radius - `ry`: Vertical radius ## Path Shapes ### Diamond (Decision Node) **Diamond Formula:** ``` Top: (center-x, top-y) Right: (right-x, center-y) Bottom: (center-x, bottom-y) Left: (left-x, center-y) ``` **Example (100px wide, 100px tall, centered at 600, 150):** ```xml Decision? ``` **Larger Diamond (200×100):** ```xml ``` ### Hexagon (Preparation) **Horizontal Hexagon:** ```xml ``` **Pattern:** ``` M [left-mid-x] [top-y] (start left of top edge) L [right-mid-x] [top-y] (top edge) L [right-x] [center-y] (top-right slope) L [right-mid-x] [bottom-y] (bottom edge) L [left-mid-x] [bottom-y] (bottom edge) L [left-x] [center-y] (top-left slope) Z (close path) ``` ### Parallelogram ```xml ``` ### Custom Polygons **Triangle:** ```xml ``` **Pentagon:** ```xml ``` ## Lines & Arrows ### Straight Lines **Horizontal:** ```xml ``` **Vertical:** ```xml ``` **Diagonal:** ```xml ``` **Dashed Line:** ```xml ``` - `stroke-dasharray="dash,gap"`: Pattern of dashes and gaps - Common patterns: `"5,5"` (small), `"10,5"` (medium), `"20,10"` (large) ### Path-based Lines **Straight line with path:** ```xml ``` - `fill="none"`: Prevents filling (required for non-closed paths used as lines) **L-shaped connector:** ```xml ``` **Multi-segment:** ```xml ``` ### Arrow Markers **Standard Arrowhead Definition:** ```xml ``` - `markerWidth/Height`: Size of marker viewport - `refX/refY`: Anchor point (where arrow attaches to line) - `orient="auto"`: Rotates to match line angle **Colored Arrows:** ```xml ``` **Using Arrows:** ```xml ``` ### Curved Lines (Bezier Curves) **Quadratic Bezier (Q):** ```xml ``` - Format: `Q control-x control-y end-x end-y` - One control point **Cubic Bezier (C):** ```xml ``` - Format: `C control1-x control1-y control2-x control2-y end-x end-y` - Two control points (more control) **Smooth Curve Through Points:** ```xml ``` - `T`: Smooth continuation of quadratic curve ## Text Elements ### Basic Text ```xml Simple Text ``` ### Text Anchoring **Horizontal Alignment:** ```xml Left Center Right ``` **Vertical Alignment:** ```xml Baseline Middle Top ``` **Note:** For reliable vertical centering, calculate Y position manually rather than relying on dominant-baseline (browser support varies). ### Text Styling ```xml Styled Text ``` **Font Families in SVG:** ```xml Custom Font ``` ### Multi-line Text **Using Multiple Elements:** ```xml Line 1 Line 2 Line 3 ``` **Line Spacing:** Typically 15-25px between lines depending on font size ### Text on Path ```xml Text following the curve ``` ## Gradients ### Linear Gradient ```xml ``` **Gradient Directions:** - Horizontal: `x1="0%" y1="0%" x2="100%" y2="0%"` - Vertical: `x1="0%" y1="0%" x2="0%" y2="100%"` - Diagonal: `x1="0%" y1="0%" x2="100%" y2="100%"` ### Radial Gradient ```xml ``` ### Multi-stop Gradients ```xml ``` ## Grouping & Reuse ### Groups () ```xml ✓ ``` **Benefits:** - Apply transformations to multiple elements - Organize related elements - Apply styles to all children ### Use Element **Define once:** ```xml ✓ ``` **Reuse multiple times:** ```xml ``` ### Symbol Element ```xml ``` **Symbol vs Group:** - Symbol has its own viewBox (scalable) - Symbol not rendered unless used - Better for reusable icons ## Transformations ### Translate (Move) ```xml ``` - Moves shape to new position - Original x, y still apply (total position = original + translate) ### Rotate ```xml ``` - Format: `rotate(angle center-x center-y)` - Angle in degrees - Rotates around specified center point ### Scale ```xml ``` - `scale(factor)`: Uniform scaling - `scale(x-factor, y-factor)`: Non-uniform scaling ### Combined Transformations ```xml ``` - Applied right to left: scale → rotate → translate ## Advanced Patterns ### Rounded Progress Bar ```xml ``` ### Donut Chart (Simplified) ```xml ``` **Multi-segment Donut:** ```xml ``` **Circumference Formula:** `2 × π × radius = 2 × 3.14159 × 150 ≈ 942` ### Drop Shadow Filter ```xml ``` ### Clipping Path ```xml ``` ## Chart Components ### Bar Chart Bar ```xml 456 ``` ### Axis Lines ```xml ``` ### Data Point Marker ```xml ``` ## Best Practices ### Coordinate Calculation **Center Text in Rectangle:** ```javascript textX = rectX + (rectWidth / 2) textY = rectY + (rectHeight / 2) + (fontSize * 0.35) ``` **Position Diamond Points:** ```javascript centerX = 600, centerY = 180 halfWidth = 100, halfHeight = 50 top: (centerX, centerY - halfHeight) right: (centerX + halfWidth, centerY) bottom: (centerX, centerY + halfHeight) left: (centerX - halfWidth, centerY) ``` ### Performance Tips - Limit total SVG elements per diagram to ~500-1000 - Use `` for repeated elements - Avoid overly complex paths - Minimize filter usage (shadows, blurs) - Group related elements ### Readability Guidelines - Minimum stroke-width: 2px for visibility - Minimum font-size: 11px for labels, 14px for emphasis - Minimum touch target: 30×30px for interactive elements - White space: 20-30px between major elements - Contrast: Stroke should be darker than fill ### Debugging SVG **Visible Boundaries:** ```xml ``` **Grid Overlay:** ```xml ``` ## Icon Library ### Checkmark ```xml ``` ### X (Close) ```xml ``` ### Warning Triangle ```xml ! ``` ### Info Circle ```xml i ```