拡張子辞典 2026-04-09
IT用語: .svg（SVGファイル）とは｜解像度に依存しないベクター画像形式
XML形式で定義されたベクター画像SVGの仕組み・PNGとの違い・Web開発での活用方法を解説。
.svg（SVG）ファイルとは
.svgは「Scalable Vector Graphics」の略で、XML形式で定義されたベクター画像ファイルです。ラスター画像（PNG・JPEG）がピクセルの集合であるのに対し、SVGは「この座標からこの座標に線を引く」「この点を中心に半径Nの円を描く」という数学的な描画命令として記述されます。そのためどんな解像度に拡大しても劣化しないのが最大の特徴です。
SVGの内部構造
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
<text x="50" y="55" text-anchor="middle" fill="white">Hi</text>
</svg>PNG・JPEGとの比較
| 比較軸 | SVG | PNG | JPEG |
|---|---|---|---|
| 形式 | ベクター | ラスター | ラスター |
| 拡大劣化 | なし | あり | あり |
| 複雑な写真 | 不向き | 向く | 最適 |
| ファイルサイズ | 小（シンプルな図形） | 中 | 小 |
| CSSアニメーション | 可能 | 不可 | 不可 |
Web開発での活用
- ロゴ・アイコン: どのデバイス解像度でも鮮明に表示
- インラインSVG: HTMLに直接埋め込み、CSSやJavaScriptで動的制御
- SVGアニメーション:
<animate>要素やCSSアニメーションでインタラクティブな図形を作成
Retina（高解像度）ディスプレイが普及した現代のWebでは、ロゴやアイコンはSVGが実質的な標準です。
おすすめの高速レンタルサーバー PR
関連する用語 (拡張子辞典)
全17件を見るIT用語: .pdf（PDFファイル）とは｜環境に依存しない文書共有フォーマット
どのデバイス・OSでも同一レイアウトで表示されるPDF形式の仕組み・内部構造・活用場面を解説。
詳しく読む
拡張子 .sh (シェルスクリプト) とは
Linuxの自動化の要、シェルスクリプト(.sh)の書き方と実行権限(chmod +x)について。
詳しく読む
IT用語: .tar / .tar.gz / .tgzとは｜Linuxの標準アーカイブ・圧縮形式
Linuxでファイルをまとめるtarと圧縮するgzipを組み合わせた.tar.gzの仕組みと主要オプションを解説。
詳しく読む
IT用語: .ini（INIファイル）とは｜シンプルな設定ファイルフォーマットの標準
Windowsで普及したシンプルな設定ファイルフォーマットINIの構文・セクション・php.ini等の利用例を解説。
詳しく読む
拡張子 .csv (Comma-Separated Values) とは
データ移行やエクスポートの王道、CSVファイルの仕組みと文字化け対策。
詳しく読む
拡張子 .yaml / .yml とは？書き方と用途
インフラ設定(Docker, Kubernetes, Ansible)で標準的なYAMLファイルの書き方と注意点。
詳しく読む