SVGファイルとは？
初心者向けガイド
SVG（Scalable Vector Graphics）は、XMLテキストに基づく画像形式です。JPGやPNGのようにピクセルを保存するのではなく、数式の指示（線・曲線・図形・色）を保存します。ブラウザがそれを読み取って画像を描画します。
なぜ「スケーラブル」なのか？
ピクセルではなく数式で定義されるため、SVGはどのサイズでも鮮明です。16pxから看板サイズまで拡大してもピクセル化せず、ぼやけません。ロゴ・アイコン・イラストに最適です。
SVG vs PNG vs JPG
- SVG：ベクター。どの倍率でも鮮明、単純な図形では軽量、テキストとして編集可能。ロゴ・アイコン・図に最適。
- PNG：ラスター（ピクセル）。透過対応だが拡大で劣化。スクショや透過画像に向く。
- JPG：ラスター、非可逆圧縮。写真向き、テキストや鋭い縁には不向き。
SVGの利点
- 無限の品質：決してピクセル化しない。
- 図形が少なければ軽量。
- 編集可能：コードを開いて色や形を変更できる。
- CSSやJavaScriptでアニメーション・スタイル付けが可能。
- アクセシブルで、すべての現代ブラウザに対応。
SVGの中身は？
青い円はこれだけです：
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#6c8cff"/></svg>
このテキストが画像そのものです。fillを変えると色が即座に変わります。
何に使う？
ロゴ、UIアイコン、イラスト、グラフや図、地図、そして解像度の異なる画面（Retinaを含む）で完璧に見える必要があるあらゆる要素。
今すぐSVGを編集
svgdeskなら、SVGを開いて図形・色・ノードを変更し、再び書き出せます。すべて無料、ブラウザ内で。