SVG（Scalable Vector Graphics）は、ウェブ上でベクター画像を扱うためのXMLベースの言語です。
SVGの主な特徴は以下の通り
- 拡大・縮小に強い: SVGは点、線、多角形などの数学的なデータで画像を定義するため、拡大してもぼやけることがなくロゴやアイコンなど様々なサイズで表示するコンテンツに利用できます。
- テキストエディタで編集可能: SVGファイルはテキストファイルなので、メモ帳などのシンプルなテキストエディタで開いて内容を確認したり、編集したりすることができます。
- スタイル変更が容易: CSS（Cascading Style Sheets）を使って、SVG画像の色や線の太さ、アニメーションなどを簡単に変更できます。
- 軽量: シンプルな画像であれば、多くの場合JPEGやPNGよりもファイルサイズが小さくなります。
- 利用: 単なる静止画だけでなくインタラクティブな要素やアニメーションも可能です。ウェブサイトのグラフィック、データ可視化やアニメーションなど、幅広い用途で利用できます。
SVG基本図形要素の使い方
SVG（Scalable Vector Graphics）は、XMLベースのベクター画像フォーマットです。
以下のテーブルは、主要なSVG図形要素とその基本的な使い方、およびHTMLコードの例を示します。
| 要素名 / 説明 | 主要な属性 / 記述例 | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<rect>四角形を描画します。 |
<rect x="10" y="10" width="80" height="60" fill="blue" />
|
||||||||||||||||||||||
<circle>円を描画します。 |
<circle cx="50" cy="50" r="40" fill="red" />
|
||||||||||||||||||||||
<ellipse>楕円を描画します。 |
<ellipse cx="100" cy="50" rx="80" ry="30" fill="green" />
|
||||||||||||||||||||||
<line>直線を描画します。 |
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
|
||||||||||||||||||||||
<polyline>複数の点を通る折れ線を描画します。 |
<polyline points="10,10 20,40 30,10" fill="none" stroke="purple" />
|
||||||||||||||||||||||
<polygon>複数の点を通る多角形を描画し、自動的に始点と終点を結びます。 |
<polygon points="100,10 40,198 190,78" fill="yellow" stroke="black" />
|
||||||||||||||||||||||
<path>最も柔軟な要素で、複雑な形状を描画します。 |
<path d="M 10 80 Q 52.5 10 95 80 T 180 80" stroke="orange" fill="transparent" />
|
||||||||||||||||||||||
<text>文字を描画します。 |
<text x="10" y="20" fill="cyan">Hello SVG</text>
|
||||||||||||||||||||||
SVG Work bench
X: 0, Y: 0
図形設定
| 図形の種類 | 位置X | 位置Y | 幅 | 高さ | 線太さ | 線の色 | 塗色 | パラメータ |
|---|