VS Code SVG 预览禁用方法

背景更新

VS Code 自 1.97 版本起默认启用 SVG 预览功能，导致 SVG 文件以图片形式打开。本文提供完整的解决方案，恢复文本编辑模式。

问题描述

VS Code 1.97+ 版本引入了 SVG 图像预览功能，使得 SVG 文件默认以图片形式打开（如下图所示）。用户无法直接编辑 SVG 源代码（本质是 XML 格式），这对需要修改 SVG 代码的开发者造成困扰。

解决方案

以下是两种有效禁用预览的方法，依照操作便捷性排序：

方法 1：通过编辑器关联设置（推荐）

修改全局配置，使所有 SVG 文件默认以文本编辑器打开：

1. 图形界面操作

   • 按 Ctrl + , 打开设置
   • 搜索 workbench.editorAssociations
   • 点击「添加项」，填写两项内容：
     • Key：*.svg
     • Value：default
       

2. 直接修改 settings.json
   按 Ctrl + Shift + P，运行命令 Preferences: Open User Settings (JSON)，添加配置：

{
  "workbench.editorAssociations": {
    "*.svg": "default" // 强制 SVG 以默认文本编辑器打开
  }
}

原理说明

default 表示使用 VS Code 内置文本编辑器，覆盖了内置的 SVG 预览器关联规则。

方法 2：通过右键菜单设置

针对临时修改或单个项目局部生效的场景：

1. 在资源管理器中 右键单击 SVG 文件
2. 选择 「打开方式」 → 「配置默认编辑器...」
3. 选择 「Text Editor (built in)」
4. 勾选 「设置为所有 .svg 文件的默认编辑器」

注意事项

• 方法 1 适用于全局配置，修改后所有项目生效
• 方法 2 是临时解决方案，重启后可能失效
• 如修改无效，尝试重启 VS Code 或检查其他扩展冲突

功能回溯

此变动源于 VS Code 1.97 的官方更新：SVG 预览支持。通过上述操作，即可恢复编辑 SVG 源码的原始工作流。

最终效果：SVG 文件将以 XML 文本形式打开，可直接编辑 SVG 代码逻辑。