SVGファイルをソースコードで表示
Visual Studio Code バージョン 1.97(2025年1月リリース)から、SVGファイルがデフォルトで画像プレビュー表示されるようになりました。この変更により、従来のようにソースコードを直接表示・編集する方法がわからなくなるケースがあります。
問題の背景
- SVGファイルを開くと画像プレビューが表示され、XMLベースのソースコードが閲覧できない
- プレビュー画面にはソース表示への切り替えオプションが存在しない
- 設定メニューにも明示的な切り替え項目が見当たらない
解決方法
方法1: 右クリックメニューから一時的に開く
- エクスプローラーで対象の
.svg
ファイルを右クリック Open with...
(開くアプリケーションの選択)を選択- 表示されるオプションから
Text Editor
(テキストエディター)をクリック
この操作でソースコード編集モードで開けますが、次回からもプレビュー表示される点に注意が必要です。
方法2: デフォルトエディターを永続的に変更
すべてのSVGファイルを恒久的にソースコード表示にする場合:
設定ファイルを開く
Ctrl + ,
(Windows/Linux)またはCmd + ,
(macOS)で設定画面を開き、右上のアイコンからsettings.json
を編集以下の設定を追加
json
{
"workbench.editorAssociations": {
"*.svg": "default"
}
}
- ファイルを保存して設定を反映
設定適用後の挙動(クリックで展開)
json
// 適用後: SVGファイルは自動的にソースコード表示に
// 例: sample.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
設定変更時の注意点
settings.json
編集後はVS Codeの再起動が必要- 元のプレビュー表示に戻す場合、値
default
をimagePreview
に変更 - 既に開いているSVGファイルは再オープンが必要
代替操作方法
コマンドパレットを使用する場合:
Ctrl + Shift + P
(Windows/Linux)またはCmd + Shift + P
(macOS)Reopen Editor With...
と入力Text Editor
を選択
ファイルタブ上での操作:
- 画像プレビュー表示中のタブを右クリック →
Reopen With
→Text Editor
これで最新バージョンのVS Codeでも、SVGのソースコード編集が可能になります。設定変更後は常にXML形式で表示され構文ハイライトやIntelliSenseも有効化されます。