SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィックスを描画するためのフォーマットです。<polyline>要素は、直線セグメントで構成される複数の連続した直線を描画するために使用されます。各直線セグメントは座標のリストで定義されます。

以下は、いくつかの異なる例で<polyline>を使用したSVGの設計です。各例は異なる特徴を持っています。

例1: 基本的なPolyline

xml
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,50 100,25 150,50 200,25 250,50" fill="none" stroke="black" stroke-width="2"/>
</svg>

この例では、5つの座標点を持つ基本的な<polyline>があります。points属性は、各座標のxとyの値をスペースで区切って指定します。

例2: 点線のPolyline

xml
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,50 100,25 150,50 200,25 250,50" fill="none" stroke="black" stroke-width="2" stroke-dasharray="5,5"/>
</svg>

stroke-dasharray属性を使用することで、点線のような外観を持つ<polyline>を作成できます。この例では、5つの座標点を持つ基本的な<polyline>に点線のスタイルが適用されています。

例3: 塗りつぶしのPolyline

xml
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <polyline points="50,50 100,25 150,50 200,25 250,50" fill="orange" stroke="black" stroke-width="2"/>
</svg>

fill属性を使用することで、<polyline>を塗りつぶすことができます。この例では、オレンジ色で<polyline>が塗りつぶされています。

これらの例は、基本的な<polyline>の使用法を示しています。<polyline>は他の属性やスタイルと組み合わせて様々なデザインを実現することができます。