Understanding the Change
With the VS Code v1.97 update, SVG files now open in an image preview by default, rather than displaying the raw XML code. While this is useful for quick visualization, it can be inconvenient for developers who need direct access to the markup.
If you prefer to edit SVG files as raw text, here are two effective solutions.
Reference: VS Code v1.97 Release Notes
Solutions: Viewing SVGs as Code
Temporary Solution: Open SVG as Text
For occasional edits, you can manually open SVG files in text mode:
- Right-click the
.svgfile in the VS Code Explorer. - Select "Open With..." from the context menu.
- Choose "Text Editor" to open the file as raw text.
This will display the raw XML instead of the image preview.
Pros
- Quick and easy.
- No changes to VS Code settings.
Cons
- Needs to be repeated for each file.
Permanent Solution: Disable Built-in SVG Image Preview
If you regularly edit SVG files, you can change VS Code settings to open them as text by default:
- Open VS Code Settings (
Cmd + ,/Ctrl + ,). - Search for
workbench.editorAssociations. - Modify the settings to set SVG files to open as default text or add the following entry in your
settings.jsonfile:
"workbench.editorAssociations": {
"*.svg": "default"
}
- Save & restart VS Code.
This ensures that SVG files always open in the text editor rather than the image preview.
Pros
- Consistent behavior for all SVG files.
- Eliminates the need for manual selection.
Cons
- Disables quick image previews unless reverted.
Summary
- For occasional edits: Use Right-click → Open With → Text Editor.
- For a permanent fix: Adjust VS Code settings to open SVGs as text by default.
By making this adjustment, you regain control over how SVG files open in VS Code, optimizing your workflow for efficient editing.
Happy coding! 🚀