SVG Notes: SVG Tag

Basic Structure

<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:

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

Example:

<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 -> they only work in viewBox units. The SVG tag handles all the scaling math.