✅ Viewport

The viewport is defined by the width and height of the SVG element in HTML or CSS.

<svg width="200" height="100">...</svg>

It controls the display size of the SVG on the page.

---

✅ viewBox

The viewBox attribute defines the internal coordinate system of the SVG.

<svg viewBox="0 0 100 50">...</svg>

It tells the browser:

“Fit this 100×50 unit space into the given viewport size.”

---

🔍 viewBox Syntax

viewBox = "min-x min-y width height"

• min-x, min-y: where the view starts
• width, height: how much of the SVG canvas is visible

---

🔁 Scaling Example

<svg width="400" height="200" viewBox="0 0 100 50">
  <!-- Content here -->
</svg>

• Viewport: 400×200 px
• ViewBox: 100×50 units
• Scale: Each SVG unit = 4px

---

Understanding this distinction helps you create responsive, scalable SVGs.