In SVG (Scalable Vector Graphics), lines are created using the <line> element. The <line> element is a basic SVG shape that connects two points with a straight line. Here's a breakdown of how to design lines in SVG with various examples:

Basic Line:

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="30" x2="190" y2="30" stroke="black" stroke-width="2" />
</svg>

This code draws a line from the point (10, 30) to (190, 30) with a black color and a stroke width of 2.

Styled Line:

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="30" x2="190" y2="30" stroke="blue" stroke-width="4" stroke-dasharray="5,5" />
</svg>

This code adds a blue line with a stroke width of 4 and a dashed pattern. The stroke-dasharray property defines the length of dashes and gaps.

Vertical Line:

xml
<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="10" x2="50" y2="190" stroke="green" stroke-width="3" />
</svg>

This code draws a vertical green line from (50, 10) to (50, 190).

Diagonal Line:

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="190" stroke="red" stroke-width="2" />
</svg>

This code creates a red diagonal line from (10, 10) to (190, 190).

Line with Arrowhead:

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" markerWidth="8" markerHeight="8" refX="3" refY="4" orient="auto">
      <polygon points="0,0 8,4 0,8" fill="blue" />
    </marker>
  </defs>
  <line x1="20" y1="20" x2="180" y2="180" stroke="blue" stroke-width="2" marker-end="url(#arrow)" />
</svg>

This example includes an arrowhead at the end of the line using the <marker> element.

Feel free to customize these examples to suit your specific needs. SVG is a powerful and flexible vector graphics format, and you can use various attributes and properties to achieve different styles and effects.