VS Code で SVG をテキストエディタで開く方法

Visual Studio Code 1.97 以降のバージョンで、SVG ファイルが画像プレビューで開かれてしまい、ソースコードを編集できない問題に悩まされていませんか？この動作は最新アップデートで導入された新機能が原因です。本記事ではコード編集モードに戻す具体的な解決方法を解説します。

問題の詳細

2025年1月にリリースされた VS Code 1.97 から、SVG (Scalable Vector Graphics) ファイルを開くとデフォルトで画像プレビューが表示されるようになりました：

SVGプレビュー画面 デフォルトで画像表示されるSVGサンプル

この変更により：

SVGソースコードが直接編集できない
コードハイライト機能が使えない
開発ワークフローが中断される

特にWeb開発者やSVG画像を手動で編集する必要があるユーザーにとって大きな弊害となります。

永続的解決法：settings.json の編集（推奨）

VS Codeの設定ファイルを変更して、すべてのSVGファイルをテキストエディタで開くように設定します。

手順

VS Codeで Ctrl + ,（Win/Linux）または Cmd + ,（Mac）を押して設定を開く
検索ボックスに workbench.editorAssociations と入力
「設定」タブで「JSON で編集」をクリック

json

{
  // 既存の設定はそのまま保持
  // 以下を追加:
  "workbench.editorAssociations": {
    "*.svg": "default"
  }
}

動作原理

"*.svg": "default": SVG拡張子ファイルに対しデフォルトのエディタ（テキストモード）を使用
全プロジェクトで一貫した動作を保証
将来のVS Codeアップデートでも設定が維持される

設定画面スクリーンショット workbench.editorAssociationsの設定画面

GUIによる代替方法：右クリックメニューから設定

設定ファイルを直接編集したくない場合、グラフィカルインターフェースから設定できます。

エクスプローラーでSVGファイルを右クリック
開くアプリケーションの選択を選択
既定のエディタを構成...をクリック
Text Editor (built-in)を選択

コンテキストメニューの操作手順

この方法は：

ワンタイム設定で完結
初級者に優しい操作体系
特定プロジェクトのみに適用可能

制限事項

右クリックメニュー方式の場合、設定が「ワークスペース設定」に保存される場合があります。全プロジェクトで適用するにはsettings.json編集が確実です

補足情報：変更が反映されない場合のトラブルシューティング

設定を変更しても動作が変わらない場合は：

VS Codeを完全に再起動
競合する拡張機能を無効化
- @builtin svg で検索して内蔵SVG拡張機能を確認
設定の競合をチェック
- コマンドパレット（Ctrl + Shift + P）でPreferences: Open Settings (UI)を開き
- "svg editor"関連の設定項目を確認

まとめ

方法	難易度	適用範囲	永続性
settings.json編集	中級	グローバル	⭐⭐高い
右クリックメニュー	初級	ワークスペース単位	⭐中

VS CodeのSVGプレビュー機能はデザイナー向けには便利ですが、開発者にとっては不便な場面があります。コード編集を優先したい場合は、上記の設定変更により元のテキストエディタモードに戻せます。最新のVS Code環境でもソースコード直接編集を継続したい方は、workbench.editorAssociations設定を強く推奨します。

関連記事

VS Code で SVG をテキストエディタで開く方法 ​

問題の詳細 ​

永続的解決法：settings.json の編集（推奨） ​

手順 ​

動作原理 ​

GUIによる代替方法：右クリックメニューから設定 ​

補足情報：変更が反映されない場合のトラブルシューティング ​

まとめ ​