SVGの基本をマスター！はじめてのSVG入門

こんにちは！この記事では、SVGの基本から実践的な使い方まで、初心者の方向けにわかりやすく解説していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/6618947a-176a-3642-f4cd-ceddc86889a0.png)


## 目次
1. [SVGとは？](#svg-intro)
2. [SVGの特徴とメリット](#svg-benefits)
3. [基本構造と主要な要素](#svg-basics)
4. [実践：SVGで図形を描いてみよう](#svg-practice)
5. [HTMLへの組み込み方](#svg-html)

<a id="svg-intro"></a>
## 1. SVGとは？

SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィックス形式です。Webでの使用を前提に設計された、W3C標準の画像フォーマットです。

### 主な用途
- Webサイトのアイコンやロゴ
- データの可視化（グラフやチャート）
- アニメーションやインタラクティブな図形
- 地図やダイアグラム

<a id="svg-benefits"></a>
## 2. SVGの特徴とメリット

### 📱 解像度に依存しない
SVGの最大の特徴は、どんなサイズに拡大・縮小しても画質が劣化しないことです。

### 🎨 編集が容易
- テキストエディタで直接編集可能
- CSSでスタイリング可能
- JavaScriptで動的な操作が可能

### 📦 ファイルサイズ
- シンプルな図形の場合、PNGやJPGより軽量
- 数式で図形を表現するため、複雑な図形でも効率的

### 🔍 SEOフレンドリー
- テキストベースのため検索エンジンが内容を理解可能
- アクセシビリティの向上に貢献

<a id="svg-basics"></a>
## 3. 基本構造と主要な要素

### SVGの基本構造

```html
<svg width="500" height="300" viewBox="0 0 500 300">
  <!-- ここに図形要素を配置 -->
</svg>
```

### 主要な属性
- `width`, `height`: SVG要素の表示サイズ
- `viewBox`: 描画領域の座標系を定義
- `preserveAspectRatio`: アスペクト比の制御方法を指定

### 基本的な図形要素

#### 1. 四角形（rect）
```html
<rect x="10" y="10" width="100" height="50" fill="blue" />
```

#### 2. 円（circle）
```html
<circle cx="60" cy="60" r="50" fill="red" />
```

#### 3. 楕円（ellipse）
```html
<ellipse cx="100" cy="50" rx="100" ry="50" fill="green" />
```

#### 4. 直線（line）
```html
<line x1="0" y1="0" x2="100" y2="100" stroke="black" />
```

#### 5. 多角形（polygon）
```html
<polygon points="50,0 100,50 50,100 0,50" fill="purple" />
```

### よく使用する属性
- `fill`: 塗りつぶしの色
- `stroke`: 線の色
- `stroke-width`: 線の太さ
- `opacity`: 透明度
- `transform`: 変形（回転、拡大縮小など）

<a id="svg-practice"></a>
## 4. 実践：SVGで図形を描いてみよう

### シンプルなアイコンの作成例

#### ホームアイコン
```html
<svg width="100" height="100" viewBox="0 0 100 100">
  <!-- 家の屋根 -->
  <polygon points="10,50 50,10 90,50" fill="#666"/>
  <!-- 家の本体 -->
  <rect x="20" y="50" width="60" height="40" fill="#888"/>
  <!-- ドア -->
  <rect x="40" y="60" width="20" height="30" fill="#444"/>
</svg>
```

#### シンプルなグラフ
```html
<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- 軸線 -->
  <line x1="10" y1="90" x2="190" y2="90" stroke="black"/>
  <line x1="10" y1="90" x2="10" y2="10" stroke="black"/>
  
  <!-- バー -->
  <rect x="30" y="40" width="20" height="50" fill="blue"/>
  <rect x="60" y="20" width="20" height="70" fill="blue"/>
  <rect x="90" y="50" width="20" height="40" fill="blue"/>
</svg>
```

<a id="svg-html"></a>
## 5. HTMLへの組み込み方

### 1. インライン埋め込み
```html
<!DOCTYPE html>
<html>
<head>
    <title>SVG Example</title>
</head>
<body>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red"/>
    </svg>
</body>
</html>
```

### 2. img要素での読み込み
```html
<img src="icon.svg" alt="アイコン" width="100" height="100">
```

### 3. CSS背景画像として使用
```css
.icon {
    background-image: url('icon.svg');
    width: 100px;
    height: 100px;
}
```

### 4. object要素での読み込み
```html
<object data="icon.svg" type="image/svg+xml" width="100" height="100">
    <!-- フォールバックコンテンツ -->
    <img src="icon.png" alt="アイコン">
</object>
```

## まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/98aa1a65-d1b0-dfa6-2535-0f23d84e8e45.png)

SVGは現代のWeb開発において非常に重要な技術の1つです。この記事で解説した基本を押さえれば、以下のようなことが可能になります：

- レスポンシブな画像やアイコンの作成
- インタラクティブな図形やアニメーションの実装
- データの視覚化やグラフの作成

次のステップとしては、以下の学習をおすすめします：

- SVGのアニメーション（SMIL, CSS, JavaScript）
- パスコマンドを使用した複雑な図形の作成
- SVGフィルターやグラデーション
- JavaScriptを使用した動的なSVG操作

## 参考リソース
- [MDN SVGチュートリアル](https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial)
- [W3C SVG 2仕様](https://www.w3.org/TR/SVG2/)