SVG 入門チュートリアル:概念、使用法と属性の詳細

SVG(Scalable Vector Graphics)は、XML に基づいたベクター画像フォーマットであり、ウェブデザインや開発で広く使用されています。この記事では、SVG の基本概念、使用方法、および各属性の詳細を説明し、いくつかのオンライン学習サイトと資料を紹介して、SVG 開発に迅速に取り組むのに役立てていただければと思います。

SVG とは何ですか?

SVG は、2 次元ベクターグラフィックスを記述するためのマークアップ言語です。ビットマップ画像とは異なり、ベクターグラフィックスは数式を使用してグラフィックの形状と位置を記述するため、劣化なく拡大縮小できます。SVG ファイルはプレーンテキストファイルであり、HTML に埋め込むことも、独立して使用することもできます。

SVG の利点

  1. 劣化のない拡大縮小:SVG 画像はどの解像度でも鮮明さを保ちます。
  2. 編集可能:SVG ファイルはテキストファイルであり、テキストエディターで編集できます。
  3. インタラクティブ性:JavaScript や CSS を使用して SVG 画像を動的に操作およびスタイル設定できます。
  4. 軽量:ビットマップ画像と比較して、SVG ファイルは通常小さく、読み込みが速いです。

SVG の基本使用法

SVG 画像は HTML に直接埋め込むことも、外部ファイルとして参照することもできます。以下はいくつかの基本的な使用方法です:

HTML に直接埋め込む

1
<!doctype html>
2
<html lang="ja">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>SVG の例</title>
7
</head>
8
<body>
9
<svg width="100" height="100">
10
<circle
11
cx="50"
12
cy="50"
13
r="40"
14
stroke="black"
15
stroke-width="3"
16
fill="red"
17
/>
18
</svg>
19
</body>
20
</html>

外部 SVG ファイルを参照する

1
<!doctype html>
2
<html lang="ja">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<title>SVG の例</title>
7
</head>
8
<body>
9
<img src="image.svg" alt="SVG 画像の例" />
10
</body>
11
</html>

SVG の基本要素と属性

よく使われる要素

  1. <circle>:円を定義します。
  2. <rect>:四角形を定義します。
  3. <line>:直線を定義します。
  4. <polyline>:連結された直線の集合を定義します。
  5. <polygon>:多角形を定義します。
  6. <path>:任意の形状のパスを定義します。
  7. <text>:テキストを定義します。

よく使われる属性

  1. widthheight:SVG 画像の幅と高さを定義します。
  2. xy:要素の位置を定義します。
  3. cxcy:円の中心点を定義します。
  4. r:円の半径を定義します。
  5. rxry:楕円の半径を定義します。
  6. points:多角形や折れ線の頂点を定義します。
  7. d:パスの指令とパラメータを定義します。
  8. fill:塗りつぶしの色を定義します。
  9. stroke:境界線の色を定義します。
  10. stroke-width:境界線の幅を定義します。

要素のサンプルコード

<circle> 要素

1
<svg width="100" height="100">
2
<circle cx="50" cy="50" r="40" stroke="white" stroke-width="2" fill="blue" />
3
</svg>

<rect> 要素

1
<svg width="100" height="100">
2
<rect
3
x="10"
4
y="10"
5
width="80"
6
height="80"
7
stroke="white"
8
stroke-width="3"
9
fill="blue"
10
/>
11
</svg>

<line> 要素

1
<svg width="100" height="100">
2
<line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="3" />
3
</svg>

<polyline> 要素

1
<svg width="100" height="100">
2
<polyline
3
points="10,10 50,50 90,10"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

<polygon> 要素

1
<svg width="100" height="100">
2
<polygon
3
points="10,10 90,10 50,90"
4
stroke="black"
5
stroke-width="3"
6
fill="green"
7
/>
8
</svg>

<text> 要素

1
<svg width="200" height="100">
2
<text x="10" y="50" font-family="Verdana" font-size="35" fill="black">
3
Hello, SVG!
4
</text>
5
</svg>

<path> 要素

<path> 要素は SVG の中で最も強力な要素の一つであり、任意の形状のパスを描画するために使用できます。これは d 属性によってパスのデータを定義し、一連のコマンドとパラメータを含みます。

よく使われるコマンド

  1. M (moveto):指定位置に移動し、線を描画しません。
  2. L (lineto):現在の点から指定位置まで直線を描画します。
  3. H (horizontal lineto):現在の点から指定 x 座標まで水平線を描画します。
  4. V (vertical lineto):現在の点から指定 y 座標まで垂直線を描画します。
  5. C (curveto):三次ベジェ曲線を描画します。
  6. S (smooth curveto):滑らかな三次ベジェ曲線を描画します。
  7. Q (quadratic Bézier curve):二次ベジェ曲線を描画します。
  8. T (smooth quadratic Bézier curveto):滑らかな二次ベジェ曲線を描画します。
  9. A (elliptical Arc):楕円弧を描画します。
  10. Z (closepath):パスを閉じ、現在の点から始点までの直線を描画します。

パスの例

簡単なパス

1
<svg width="100" height="100">
2
<path
3
d="M10 10 H 90 V 90 H 10 Z"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

このパスは (10, 10) から始まり、(90, 10) まで水平線を描き、次に (90, 90) まで垂直線を描き、続いて (10, 90) まで水平線を描き、最後にパスを閉じます。

ベジェ曲線

1
<svg width="100" height="100">
2
<path
3
d="M10 80 C 40 10, 65 10, 95 80"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

このパスは (10, 80) から始まり、制御点が (40, 10) と (65, 10)、終点が (95, 80) の三次ベジェ曲線を描きます。

楕円弧

1
<svg width="100" height="100">
2
<path
3
d="M10 50 A 30 30 0 0 1 90 50"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

このパスは (10, 50) から始まり、半径が 30、終点が (90, 50) の楕円弧を描きます。

各属性の詳細と例

M (moveto) コマンド

1
<svg width="100" height="100">
2
<path d="M10 10 L90 90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

L (lineto) コマンド

1
<svg width="100" height="100">
2
<path
3
d="M10 10 L90 10 L90 90 L10 90 Z"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

H (horizontal lineto) コマンド

1
<svg width="100" height="100">
2
<path d="M10 10 H90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

V (vertical lineto) コマンド

1
<svg width="100" height="100">
2
<path d="M10 10 V90" stroke="black" stroke-width="3" fill="none" />
3
</svg>

C (curveto) コマンド

1
<svg width="100" height="100">
2
<path
3
d="M10 80 C 40 10, 65 10, 95 80"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

S (smooth curveto) コマンド

1
<svg width="100" height="100">
2
<path d="M10 80 S 40 10, 95 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

Q (quadratic Bézier curve) コマンド

1
<svg width="100" height="100">
2
<path d="M10 80 Q 50 10, 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

T (smooth quadratic Bézier curveto) コマンド

1
<svg width="100" height="100">
2
<path d="M10 80 T 90 80" stroke="black" stroke-width="3" fill="none" />
3
</svg>

A (elliptical Arc) コマンド

1
<svg width="100" height="100">
2
<path
3
d="M10 50 A 30 30 0 0 1 90 50"
4
stroke="black"
5
stroke-width="3"
6
fill="none"
7
/>
8
</svg>

Z (closepath) コマンド

1
<svg width="100" height="100">
2
<path d="M10 10 H90 V90 H10 Z" stroke="black" stroke-width="3" fill="none" />
3
</svg>

オンライン学習サイトと資料

  1. MDN Web Docs:詳細な SVG チュートリアルと参考資料を提供します。

  2. W3Schools:簡単に理解できる SVG チュートリアルを提供します。

  3. CSS-Tricks:SVG の高度な使用法と事例を提供します。

  4. SVGOMG:SVG ファイルをオンラインで最適化するツールです。