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も有効化されます。

関連記事

SVGファイルをソースコードで表示 ​

問題の背景 ​

解決方法 ​

方法1: 右クリックメニューから一時的に開く ​