Introduction to SVG: Guide to ViewBox, Paths, and Attributes

SVG (Scalable Vector Graphics) is a versatile, resolution-independent way to create vector-based graphics directly in the browser. Let’s explore the basic syntax and the viewBox attribute of SVG with practical examples.

<svg class="w-full" viewBox="0 0 200 500" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 10 L 200 10" stroke="red" stroke-width="1" stroke-dasharray="12,25" />
    <path d="M 200 10 L 200 200" stroke="blue" stroke-width="5" stroke-dasharray="20,2" />
</svg>

Visual Representation

The red path lies entirely within the SVG's parent div, while the blue path extends along the y-axis. This behavior demonstrates how viewBox and class work together to constrain or extend paths as needed.

Explanation

• class="w-full": This ensures the SVG's width dynamically adjusts to the parent div.
• viewBox="0 0 200 500": Defines the coordinate system and visible area. It includes:
  • min-x: The starting x-coordinate.
  • min-y: The starting y-coordinate.
  • width: Horizontal span of the coordinate system.
  • height: Vertical span of the coordinate system.

Breaking Down the path Attribute

1. Drawing a Line:
   • d="M 10 10 L 200 10":
     • M: Move to the point (10,10).
     • L: Draw a line to the point (200,10).
   • stroke-dasharray="12,25":
     • Creates a dashed line, where each segment is 12px long, followed by a 25px gap.
2. Extending the Path:
   • d="M 200 10 L 200 200": Moves from (200,10) to (200,200), creating a vertical line.
   • stroke-dasharray="20,2":
     • Produces a pattern with 20px dashes separated by 2px.

ViewBox Explained

The viewBox attribute is fundamental for controlling how the SVG scales and aligns. Its syntax is straightforward:

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

• min-x: Defines the x-coordinate of the top-left corner.
• min-y: Specifies the y-coordinate of the top-left corner.
• width: Determines the horizontal range of the coordinate system.
• height: Sets the vertical range.