SVG入門

2021.02.15

SVGを使うとエディタとブラウザがあれば、特に環境を準備することなく図形を描くことができます。

基本

次のようにすると図形（この場合、赤い丸）が描画されます。

<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>
</body>
</html>

サンプル

SVGファイル

次のようにして「.svg」として保存すると画像ファイルとして扱えます。

<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:svgjs="http://svgjs.dev/svgjs"
  viewBox="0 0 400 300"
  width="400"
  height="300">
<circle cx="50" cy="50" r="45" fill="red" />
</svg>

線

「line」を使います。
strokeで線の色、stroke-widthで線の太さを指定します。

<svg width="200" height="100">
<line x1="10" y1="10" x2="190" y2="70" stroke="red" stroke-width="1" />
<line x1="10" y1="20" x2="190" y2="80" stroke="green" stroke-width="2" />
<line x1="10" y1="30" x2="190" y2="90" stroke="blue" stroke-width="3" />
</svg>

折れ線の場合は「polyline」を使います。

<svg width="200" height="100">
<polyline points="10,10 50,80 100,50 150,20 190,90" stroke="red" fill="white" stroke-width="3" />
</svg>

長方形

「rect」を使います。
fillで塗りつぶし、strokeで線の色、stroke-widthで線の太さを指定します。
fill-opacityで透過度を指定します。「1」だと不透明、「0」だと透明。
塗りつぶしを透明にするときはfill=noneとします。

<svg width="400" height="100">
<rect x="10" y="10" width="380" height="80" fill="silver" stroke="blue" stroke-width="3" />
</svg>

円

「circle」を使います。
cxとcyで中心、rで半径を指定します。

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4" />
</svg>

楕円

「ellipse」を使います。

<svg width="100" height="100">
<ellipse cx="50" cy="50" rx="40" ry="30" fill="yellow" stroke="green" stroke-width="4" />
</svg>

テキスト

テキストの描画には「text」を使います。
font-sizeでフォントサイズ、text-anchorで位置を指定します。

<svg height="200" width="200">
<text x="100" y="50" fill="red" text-anchor="start" font-size="20">左揃え</text>
<text x="100" y="100" fill="red" text-anchor="middle" font-size="20">中央揃え</text>
<text x="100" y="150" fill="red" text-anchor="end" font-size="20">右揃え</text>
</svg>

左揃え 中央揃え 右揃え

上下の位置は、dominant-baselineで指定します。
上下中央は、英語と日本語で異なります。
英語の場合、middleで真ん中になりますが、日本語の場合、centralで真ん中になります。

<svg height="200" width="200">
<text x="100" y="50" fill="red" dominant-baseline="auto" font-size="20">下揃え</text>
<text x="100" y="100" fill="red" dominant-baseline="central" font-size="20">上下中央</text>
<text x="100" y="150" fill="red" dominant-baseline="hanging" font-size="20">上揃え</text>
</svg>

下揃え 中央揃え 上揃え

全種類を上から順に並べてみます。色々ありますが結局三種類しか使わないでしょう。

◆auto ◆text-top ◆text-bottom ◆alphabetic ◆middle ◆central ◆mathematical ◆hanging

点線

次のようにすると点線を描くことができます。

<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="50" stroke="black" stroke-width="2" stroke-dasharray="2" />
<line x1="50" y1="150" x2="250" y2="150" stroke="black" stroke-width="2" stroke-dasharray="2 4" />
</svg>

矢印

次のようにすると矢印を描くことができます。

<svg width="200" height="200">
<marker viewBox="0 -5 10 10" markerWidth="5" markerHeight="5" id="mk" orient="auto">
<polygon points="10,0 0,5 0,-5" />
</marker>
<line x1="50" y1="100" x2="150" y2="100" stroke="black" stroke-width="3" marker-end="url(#mk)" />
<line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="3" marker-end="url(#mk)" />
</svg>

markerで描いた図形をlineなどの線に付ける感じです。
通常は三角形ですが四角形でも星型でも何でもいいです。
ただ三角形が一番見やすいです。

(10,0) (0,0) (0,5) (0,-5)

コメント

タイトルとURLをコピーしました