SVG で折れ線を描くには polyline 要素を使用します。

circle要素：書き方

折れ線のポイントとなる座標を points 属性内に x,y と並べて記入し、半角スペースで区切って複数のポイントを記入します。線のみで表示するには fill 属性を none にします。

<svg width="600" height="200">
    <polyline points="10,10 100,100 180,150 450,100 580,180" stroke="#666" stroke-width="5" fill="none" />
</svg>

ブラウザでの表示

折れ線内を塗りつぶす

折れ線内を塗りつぶすには、fill 属性値に色を指定します。

<svg width="600" height="220">
<!-- 丸を線で囲む -->
    <polyline points="100,100 200,200 450,100 580,180" stroke="#666" stroke-width="5" fill="#95D2FB" />
</svg> 

ブラウザでの表示

折れ線の折り返しの形状を変更する

折れ線の折り返しの形状を変更するには、stroke-linejoin 属性に値を設定します。デフォルトは尖った形の miter になっています。丸くするには round、紙を折り返したような形にするには bevel を設定します。

<svg width="600" height="700">
<!-- デフォルトの折り返し -->
    <polyline points="100,100 200,280 450,100 580,280" stroke="#666" stroke-width="20" fill="none" />

<!-- 折り返しを丸く -->
    <polyline points="100,300 200,480 450,300 580,480" stroke="#666" stroke-width="20" fill="none" stroke-linejoin="round" />

<!-- 折り返しを紙のようにする -->
    <polyline points="100,500 200,680 450,500 580,680" stroke="#666" stroke-width="20" fill="none" stroke-linejoin="bevel" />
</svg> 

ブラウザでの表示

デフォルトの折り返し

stroke-linejoin=”round”

stroke-linejoin=”bevel”

SVG で丸を描くには circle 要素を使用します。

circle要素：書き方

円の中心となる座標を cx 属性と cy 属性で指定し、r 属性で半径を指定します。塗りつぶしには fill 属性を使用します。

<svg width="300" height="200">
    <circle cx="150" cy="100" r="80" fill="#30A8F5"/>
</svg>

ブラウザでの表示

丸を線で囲む

丸を塗りつぶさずに線で囲むには、fill 属性を none にし stroke 属性でライン色を指定します。stroke-dasharray や stroke-linecap 属性を合わせて指定擂れば破線にしたりドットにしたりできます。

<svg width="600" height="200">
<!-- 丸を線で囲む -->
    <circle cx="100" cy="100" r="50" fill="#fff" stroke="#F46860" stroke-width="5" />
    
<!-- 丸を破線で囲む -->    
    <circle cx="300" cy="100" r="50" fill="#fff" stroke="#F46860" stroke-width="5" stroke-dasharray="10,5" />
    
<!-- 丸をドットの線で囲む -->
    <circle cx="500" cy="100" r="50" fill="#fff" stroke="#F46860" stroke-width="5" stroke-dasharray="1,12" stroke-linecap="round" />
</svg> 

ブラウザでの表示

stroke 属性を指定

stroke-dasharray=”10,5″ を指定

stroke-linecap=”round” を指定

塗りの透明度を変える

丸内の塗りの透明度を変えるには fill-opacity 属性を指定します。

<svg width="300" height="200">
    <circle cx="150" cy="100" r="70" fill="#30A8F5" fill-opacity="0.5" />
</svg>

ブラウザでの表示

SVG で四角を描くには rect 要素を使用します。

rect要素：書き方

四角の左上の座標を x y 属性で指定し、width height 属性で大きさを指定します。四角の色は fill 属性で指定します。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F46860"/>
</svg>

ブラウザでの表示

四角を線で囲む

四角を塗りつぶさずに線で囲むには、fill 属性を none にし stroke 属性でライン色を指定します。stroke-dasharray や stroke-linecap 属性を合わせて指定擂れば破線にしたりドットにしたりできます。

<svg width="600" height="500">
<!-- 四角を線で囲む -->
    <rect x="50" y="50" width="500" height="100" fill="none" stroke="#F46860" stroke-width="5" />
    
<!-- 四角を破線で囲む -->    
    <rect x="50" y="200" width="500" height="100" fill="none" stroke="#F46860" stroke-width="5" stroke-dasharray="20,7" />
    
<!-- 四角をドットの線で囲む -->
    <rect x="50" y="350" width="500" height="100" fill="none" stroke="#F46860" stroke-width="5" stroke-dasharray="2,15" stroke-linecap="round" />
</svg>

ブラウザでの表示

stroke 属性を指定

stroke-dasharray=”20,7″ を指定

stroke-linecap=”round” を指定

一つの svg タグに複数の四角を重ねる

一つの svg タグに複数の四角を重ねて配値すると、後から記述した rect 要素が上に重なります。これは他の svg 要素でも同じです。

<svg width="600" height="230">
<!-- ピンク -->
    <rect x="50" y="50" width="280" height="100" fill="#F47197"/>
<!-- 黄色 -->
    <rect x="250" y="100" width="100" height="100" fill="#FDA93B"/>
<!-- グレー -->
    <rect x="320" y="70" width="150" height="100" fill="#ECEEF1"/>
<!-- 青 -->
    <rect x="430" y="50" width="150" height="100" fill="#39A9F2"/>
</svg>

ブラウザでの表示

塗りの透明度を変える

四角内の塗りの透明度を変えるには fill-opacity 属性を指定します。

<svg width="600" height="200">
    <rect x="50" y="50" width="500" height="100" fill="#F46860" fill-opacity="0.5" />
</svg>

ブラウザでの表示

角が丸い四角にする

角を丸くするには rx 属性と ry 属性を使用します。rx 属性には横幅の半径、ry 属性には縦幅の半径を指定します。stroke を付けた場合は stroke がつぶれる感じになります。

<svg width="600" height="350">
<!-- 角丸 -->
    <rect x="50" y="50" width="500" height="100" fill="#1FCEB4" rx="15" ry="15" />

<!-- 線がある角丸 -->    
    <rect x="50" y="200" width="500" height="100" fill="#1FCEB4" stroke="#ccc" stroke-width="10" rx="15" ry="15" />
</svg>

ブラウザでの表示

角丸

線がある角丸

インライン SVG で線を描くには line要素を使用します。

line要素：書き方

x1 x2 属性で横座標の始まりと終わりの位置を指定します。y1 y2 属性で縦座標の始まりと終わりの位置を指定します。線の色は stroke 属性で設定します。線の太さは stroke-width 属性でピクセル値又は em cm などの単位を指定します。

<svg width="500" height="200">
    <line x1="50" y1="50" x2="450" y2="50" stroke="black" stroke-width="1px" />
</svg>

ブラウザでの表示

線の端を加工する

線の端の形状は stroke-linecap 属性で指定します。デフォルトは butt 値となっています。
丸は round、四角は square を指定します。

<svg width="600" height="200">
<!--デフォルト stroke-linecap="butt" -->
    <line x1="50" y1="50" x2="550" y2="50" stroke="#ccc" stroke-width="20px" stroke-linecap="butt" />

<!--線の先がまるい stroke-linecap="round" -->
    <line x1="50" y1="100" x2="550" y2="100" stroke="#ccc" stroke-width="20px" stroke-linecap="round" />
  
<!--線の先が四角 stroke-linecap="square" -->
    <line x1="50" y1="150" x2="550" y2="150" stroke="#ccc" stroke-width="20px" stroke-linecap="square" />
</svg>

ブラウザでの表示

線を破線にする

線を破線にするには stroke-dasharray 属性で指定します。カンマで区切って破線の長さと、間隔を指定します。複数指定した場合は、その数分だけの長さを間隔を繰り返し表示します。

<svg width="500" height="200">
<!--破線の長さ10px、破線の間隔10px-->
    <line x1="50" y1="50" x2="550" y2="50" stroke="#666" stroke-width="10px" stroke-dasharray="10,10" />
    
<!--破線の長さ20px、破線の間隔10px-->
    <line x1="50" y1="100" x2="550" y2="100" stroke="#666" stroke-width="10px" stroke-dasharray="20,10" />
    
<!--破線の長さ30px、破線の間隔10pxと破線の長さ10px、破線の間隔10pxの組み合わせ-->
    <line x1="50" y1="150" x2="550" y2="150" stroke="#666" stroke-width="10px" stroke-dasharray="30,10,10,10" />
</svg>

ブラウザでの表示

破線を丸くする

破線を丸くするには stroke-linecap=”round” 属性を合わせて使用します。

<svg width="600" height="100">
<!--破線の長さ1px、破線の間隔20px で stroke-linecap="round" にする-->
    <line x1="50" y1="50" x2="550" y2="50" stroke="#666" stroke-width="10px" stroke-dasharray="1,20" stroke-linecap="round" />
</svg>

ブラウザでの表示

破線の開始位置をずらす

破線の開始位置をずらして表示するには stroke-dashoffset 属性を指定します。

<svg width="600" height="200">
<!--破線の開始位置 のデフォルト-->
    <line x1="50" y1="50" x2="550" y2="50" stroke="#666" stroke-width="10px" stroke-dasharray="20,10"  />
    
<!--破線の開始位置を10pxずらす-->
    <line x1="50" y1="100" x2="550" y2="100" stroke="#666" stroke-width="10px" stroke-dasharray="20,10" stroke-dashoffset="10" />
</svg>

ブラウザでの表示

線の透明度を変える

線の透明度を変えるには stroke-opacity 属性を指定します。

<svg width="600" height="200">
<!--破線の透明度 デフォルト-->
    <line x1="50" y1="50" x2="750" y2="50" stroke="#666" stroke-width="10px"  />
   
<!--透明度 0.5-->
    <line x1="50" y1="100" x2="750" y2="100" stroke="#666" stroke-width="10px" stroke-dashoffset="10" stroke-opacity="0.5" />
</svg>

ブラウザでの表示