Opening SVG Files In Visual Studio Code As Source Code

Опубликовано: 19 Май 2026
на канале: Photics TV
5,867
122

Visual Studio Code is a nice integrated development environment application from Microsoft. It's updated often, usually monthly. Often, those changes are nice. But sometimes, those updates can cause problems.

That's what happened here! While working on a Jigsaw game for an upcoming Photics book, I wanted to see if I was heading in the right direction. I was drawing all of those jigsaw puzzle pieces manually, but could those pieces ultimately be managed with JavaScript? To be sure, the source code of the SVG file needed inspection.

Surprisingly, the SVG source code was not shown.
Instead, only the image was shown.

Being able to edit the SVG, with the find and replace tools in Visual Studio Code, is a big part of the project. Did I just lose a powerful tool? No, it's fine. After updating a setting in Visual Studio Code, the application worked as it did previously.

Using the “Reopen Editor With…” option, along with the “Configure default editor for ‘*.svg’” option, solved the problem.


LINKS
Visual Studio Code — https://code.visualstudio.com
NASA “Blue Marble” — https://science.nasa.gov/resource/blu...
GitHub Issue — https://github.com/microsoft/vscode/i...
…also… https://github.com/microsoft/vscode/i...
…and… https://github.com/microsoft/vscode/i...


TAGS
#techsupport #svg #visualstudiocode #vscode #programming #tutorial #tutorials #computers #software #photics