【IT用語】SVG

SVGとは？

SVG（Scalable Vector Graphics）は、ベクター画像をXML形式で表現するファイル形式です。
拡大・縮小しても画質が劣化せず、テキストエディタで中身を編集できるのが特徴です。

• ベクター画像 → 線や図形を数式で表現（拡大してもきれい）
• ラスター画像（JPEG/PNGなど） → ドット（ピクセル）の集まりで表現（拡大するとぼやける）

SVGの特徴

1. 拡大縮小しても劣化しない
   → ロゴやアイコンに最適。
2. テキストとして編集できる
   → 色やサイズを直接コードで変更可能。
3. CSSやJavaScriptと連携可能
   → Webページにアニメーションを付けられる。

例：シンプルな円を描くSVG

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <!-- 赤い円 -->
  <circle cx="100" cy="100" r="80" 
          fill="red" stroke="black" stroke-width="3"/>
</svg>

解説

• <svg> : SVG全体を囲むタグ（幅200px、高さ200px）
• <circle> : 円を描くタグ
  • cx="100" cy="100" → 中心座標 (x=100, y=100)
  • r="80" → 半径80
  • fill="red" → 塗りつぶし色は赤
  • stroke="black" → 外枠は黒
  • stroke-width="3" → 外枠の太さは3px

このコードをメモ帳に貼り付けて sample.svg として保存し、ブラウザで開くと赤い円が表示されます。