SVG（Scalable Vector Graphics）を使用して直線（Line）を設計する際には、<line>要素を使用します。<line>要素は、始点と終点の座標を指定して直線を描画するのに役立ちます。以下に、さまざまな例を挙げてSVGで直線を設計する方法を説明します。

基本の直線:

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

この例では、長さ 180 ユニットの直線を描画しています。x1およびy1は始点の座標で、x2およびy2は終点の座標です。stroke属性は線の色を指定します。

色や太さを指定:

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

この例では、線の色を赤（red）に、線の太さを3ユニットに設定しています。stroke-width属性を使用して線の太さを指定できます。

破線:

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="2" stroke-dasharray="5,3" />
</svg>

この例では、青い線で太さ2の破線を描画しています。stroke-dasharray属性を使用して、破線パターンを指定できます。この例では、5ユニットの線が続いて3ユニットの空白が続く破線パターンを指定しています。

始点と終点の座標を変更:

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

この例では、始点と終点の座標を変更しています。これにより、異なる位置に直線が描画されます。

これらの例を基に、SVGの<line>要素を使って直線を設計する方法をカスタマイズできます。必要に応じて、他の属性やスタイルも調整してください。