Viewing SVG Source in VS Code 1.97+

Problem Statement
Visual Studio Code version 1.97 (January 2025) introduced built-in SVG image preview functionality. While helpful for visualizing SVG files, this change replaced the text editor view by default. Users now face difficulty viewing or editing raw SVG source code when opening .svg files. Current solutions involve manual workflows to access the XML source instead of the rendered image.

Key Changes in VS Code 1.97

• SVG preview is now the default behavior
• Direct source code editing unavailable by default
• No visible toggle in preview UI

Solution 1: Temporary Access via Context Menu

1. Right-click the SVG file in Explorer panel
2. Select Open with...
3. Choose Text Editor from the menu

This opens the file in code view with syntax highlighting while maintaining preview functionality for other SVG files.

Solution 2: Permanent Configuration

To always open SVG files as source code:

1. Open VS Code Settings (Ctrl + , or Cmd + ,)
2. Add the editor association in your settings JSON:

// settings.json
{
  "workbench.editorAssociations": {
    "*.svg": "default"
  }
}

This setting configures VS Code to treat SVG files as standard text files rather than images.

Explanation of Solutions

• Context Menu Method: Ideal for occasional inspection without changing default behavior
• JSON Configuration: Permanent solution for developers who primarily edit SVG source
• Both methods coexist with SVG preview capabilities—configured files still show previews when using Open Preview (Ctrl+Shift+V/Cmd+Shift+V)

SVG Preview Remains Available

After implementing Solution 2, you can still preview rendered SVGs using:

1. Revert settings temporarily through Open with... → Preview
2. Use workbench.editorAssociations rules for specific file patterns

Modifying this setting requires restarting VS Code to ensure consistent behavior across all workspace files.