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:

1. SVG element size = how much space it takes in the webpage

2. 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.