Skip to content

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

Visual Studio Code バージョン 1.97(2025年1月リリース)から、SVGファイルがデフォルトで画像プレビュー表示されるようになりました。この変更により、従来のようにソースコードを直接表示・編集する方法がわからなくなるケースがあります。

問題の背景

  • SVGファイルを開くと画像プレビューが表示され、XMLベースのソースコードが閲覧できない
  • プレビュー画面にはソース表示への切り替えオプションが存在しない
  • 設定メニューにも明示的な切り替え項目が見当たらない

解決方法

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

  1. エクスプローラーで対象の.svgファイルを右クリック
  2. Open with...(開くアプリケーションの選択)を選択
  3. 表示されるオプションからText Editor(テキストエディター)をクリック

この操作でソースコード編集モードで開けますが、次回からもプレビュー表示される点に注意が必要です。

方法2: デフォルトエディターを永続的に変更

すべてのSVGファイルを恒久的にソースコード表示にする場合:

  1. 設定ファイルを開く
    Ctrl + ,(Windows/Linux)またはCmd + ,(macOS)で設定画面を開き、右上のアイコンからsettings.jsonを編集

  2. 以下の設定を追加

json
{
  "workbench.editorAssociations": {
    "*.svg": "default"
  }
}
  1. ファイルを保存して設定を反映
設定適用後の挙動(クリックで展開)
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の再起動が必要
  • 元のプレビュー表示に戻す場合、値defaultimagePreviewに変更
  • 既に開いているSVGファイルは再オープンが必要

代替操作方法

コマンドパレットを使用する場合:

  1. Ctrl + Shift + P(Windows/Linux)またはCmd + Shift + P(macOS)
  2. Reopen Editor With...と入力
  3. Text Editorを選択

ファイルタブ上での操作:

  • 画像プレビュー表示中のタブを右クリック → Reopen WithText Editor

これで最新バージョンのVS Codeでも、SVGのソースコード編集が可能になります。設定変更後は常にXML形式で表示され構文ハイライトやIntelliSenseも有効化されます。