Friday, May 23, 2025

VS Code SVG Edit

The default behavior for many image formats in VS Code, including SVG is to preview, not edit
.It tries to be helpful by showing you the visual result.

Option 1:  To edit: Right-Click and "Open With" => Select "Text Editor"

Option 2: Set Text Editor as Default for SVG
To make text editor the default for all SVG files:
Go to File > Preferences > Settings (or press Ctrl+,)
Search for "workbench.editorAssociations"
Click on "Edit in settings.json"
Add or modify this entry:
"workbench.editorAssociations": { "*.svg": "default" }

Option 3: Use SVG Extensions
For better SVG editing experience, consider these extensions:
SVG by Jock (provides syntax highlighting and snippets)
SVG Viewer by cssho (enhanced viewer with zoom, pan features)
SVG Editor by henoc (visual SVG editor with code synchronization)

SVG Editor - Visual Studio Marketplace
does not seem to work?



No comments: