# SVG Notes: SVG Tag

# Basic Structure

```xml
<svg viewBox="0 0 100 100">
  <!-- children elements go here -->
</svg>
```

# Key Attributes

## viewBox (most important)

* **Format**: `viewBox="x y width height"`
    
* **Purpose**: Defines the coordinate system for child elements
    
* **Example**: `viewBox="0 0 100 100"` creates a 100x100 unit canvas starting at (0,0)
    
* **Common usage**: Start with `"0 0"` to begin at top-left corner
    

## width/height

* **Purpose**: Physical size in the webpage
    
* **Examples**: `width="500px"` or `width="100%"`
    
* **Without these**: SVG scales to fit its container
    

## preserveAspectRatio

* **Default**: Keeps proportions, centers content
    
* **"none"**: Stretches to fill container (usually avoid this)
    
* **Most of the time**: Don't touch this attribute
    

# How It Works

**Two separate concepts:**

1. **SVG element size** = how much space it takes in the webpage
    
2. **viewBox** = coordinate system for drawing inside
    

**Example:**

```xml
<svg width="500px" height="500px" viewBox="0 0 100 100">
  <rect x="20" y="20" width="60" height="40" />
</svg>
```

* Child elements use viewBox coordinates (0-100)
    
* `x="20"` becomes 100px from left (20% of 500px)
    
* All scaling happens automatically
    

# Key Insight

Children don't know about pixel sizes -&gt; they only work in viewBox units. The SVG tag handles all the scaling math.