SVG Line

SVG : Drawing Straight Lines

Understanding the Element

The SVG <line> element is fundamental for drawing a straight line between two points.

This is how a simple red line from point (0,0) to (200,200) with a thickness of 2 pixels would look:

A red diagonal line starting from the top-left, extending downwards and to the right.

SVG Code Example:

<svg width="250" height="250">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:red; stroke-width:2;" />
</svg>

Core Attributes Explained:

• x1: The x-coordinate of the line’s starting point.
• y1: The y-coordinate of the line’s starting point.
• x2: The x-coordinate of the line’s ending point.
• y2: The y-coordinate of the line’s ending point.

Styling the Line:

Lines are typically styled using CSS properties, either inline via the style attribute or through CSS stylesheets. Common properties include:

• stroke: Defines the color of the line (e.g., red, #FF0000).
• stroke-width: Defines the thickness of the line (e.g., 2, 5px).
• stroke-opacity: Defines the opacity of the line’s color (value from 0 to 1).
• stroke-linecap: Defines the shape of the line endings (butt, round, square).
• stroke-dasharray: Creates dashed lines (e.g., 5,5 for 5 units of line, 5 units of space).

Example with more styling:

<svg width="300" height="100">
  <line x1="10" y1="50" x2="290" y2="50"
        style="stroke:blue; stroke-width:4; stroke-dasharray:10,5; stroke-linecap:round;" />
</svg>

Practical Application:

Lines are used extensively in diagrams, charts (e.g., axes, grid lines), borders, connectors between elements, and any graphical representation requiring straight segments.

For more advanced line styling and capabilities, explore SVG path elements. You can find comprehensive documentation on MDN Web Docs for SVG.