拡張子辞典 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件を見る拡張子 .log (ログファイル) とは
「システムの日記帳」であるログファイル（.log）の役割と、エンジニアの調査方法。
詳しく読む
拡張子 .json (JavaScript Object Notation) とは
Web API通信のデファクトスタンダードであるJSONの構造と、プログラマーに愛される理由。
詳しく読む
IT用語: .gitignoreとは｜Gitの追跡から除外するファイルの指定方法
node_modules・.env・ビルド成果物などをGitの管理から除外する.gitignoreファイルの書き方を解説。
詳しく読む
拡張子 .yaml / .yml とは？書き方と用途
インフラ設定(Docker, Kubernetes, Ansible)で標準的なYAMLファイルの書き方と注意点。
詳しく読む
拡張子 .pem (Privacy Enhanced Mail) とは
SSL/TLS証明書やSSHの秘密鍵として使われる「.pem」ファイルの正体と取り扱い。
詳しく読む
IT用語: .envファイルとは｜環境変数を管理する設定ファイルの仕組みと注意点
APIキー・DB接続情報などの環境変数を管理する.envファイルの使い方とGitへのコミット防止策を解説。
詳しく読む