Disable SVG Preview in VS Code

Visual Studio Code introduced SVG image previews as the default behavior starting from version 1.97, which replaces the previous text/code view. This guide explains how to revert to seeing SVG code.

Problem: SVG Files Open as Images

When opening SVG files in VS Code 1.97+, they render as image previews instead of XML/HTML text. This prevents direct code editing. This behavior was introduced in VS Code update version 1.97 as a feature.

Why this happens

VS Code automatically renders scalable vector graphics as images unless explicitly configured otherwise—no extension conflicts are required for this change.

Permanent Solutions

Disable the preview using one of these methods:

Method 1: Modify Editor Associations (Recommended)

1. Open VS Code Settings (Ctrl+, / Cmd+,)
2. Search for workbench.editorAssociations
3. Click Add Item in the Settings tab
4. Enter Key: *.svg
5. Enter Value: default
6. Save changes

Settings.json alternative

Add this directly to your settings.json:

"workbench.editorAssociations": {
  "*.svg": "default"
}

Method 2: Context Menu Configuration

1. Right-click any SVG file in Explorer
2. Select Open With > Configure Default Editor for '*.svg'
3. Choose Text Editor
4. All SVGs will now open as code

Temporary Workaround

For one-time viewing:

• Right-click the SVG tab > Reopen Editor With > Text Editor
• Right-click the file in Explorer > Open With > Text Editor

Solution Comparison

Method	Permanent?	Difficulty	Configuration Type
Editor Associations	Yes	Easy	GUI/JSON
Context Menu	Yes	Easy	GUI
Reopen With	No	Low	Context menu

Fallback for Method 1 Issues

If workbench.editorAssociations doesn't work (rare), use Method 2. Some users reported inconsistencies with the JSON configuration in older workspace versions.

Changes apply instantly—no restart required. SVG files will now consistently open in text-editing mode while retaining image preview availability through the Open Preview context command.