拡張子辞典 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用語: .sql（SQLファイル）とは｜データベース操作コマンドをまとめたスクリプト
DDL・DML・マイグレーションスクリプトなどSQLコマンドを記述する.sqlファイルの用途と管理方法を解説。
詳しく読む
IT用語: .tar / .tar.gz / .tgzとは｜Linuxの標準アーカイブ・圧縮形式
Linuxでファイルをまとめるtarと圧縮するgzipを組み合わせた.tar.gzの仕組みと主要オプションを解説。
詳しく読む
IT用語: .ts（TypeScriptファイル）とは｜型安全なJavaScriptのスーパーセット
JavaScriptに静的型付けを加えたTypeScriptの.tsファイルの仕組み・型システム・JavaScriptとの違いを解説。
詳しく読む
拡張子 .sh (シェルスクリプト) とは
Linuxの自動化の要、シェルスクリプト(.sh)の書き方と実行権限(chmod +x)について。
詳しく読む
IT用語: .envファイルとは｜環境変数を管理する設定ファイルの仕組みと注意点
APIキー・DB接続情報などの環境変数を管理する.envファイルの使い方とGitへのコミット防止策を解説。
詳しく読む
IT用語: .gitignoreとは｜Gitの追跡から除外するファイルの指定方法
node_modules・.env・ビルド成果物などをGitの管理から除外する.gitignoreファイルの書き方を解説。
詳しく読む