SVG源代码查看与编辑（VS Code 2025年版）

自VS Code 2025年1月更新（1.97版本）起，SVG文件默认开启图像预览功能，这虽然方便了图像查看，但也让开发者访问SVG源代码变得困难。本文将详细介绍在最新版本中查看和编辑SVG源内容的多种方法。

问题描述

在VS Code 1.97版本后：

• SVG文件自动呈现为图像预览，而非XML源代码
• 编辑器界面未提供直接切换按钮
• 设置选项中找不到显式关闭预览的开关
• 传统双击打开文件始终触发预览模式

此变化使得需要直接修改SVG代码的开发工作受阻，亟需解决方案。

---

解决方案

方法一：通过上下文菜单打开（单次操作）

1. 在资源管理器右键单击目标SVG文件
2. 选择 "打开方式..." → "文本编辑器"
3. 文件将在新的标签页中以XML源代码形式打开

方法二：配置默认编辑器（永久生效）

选项A：图形界面设置

1. 右键SVG文件 → "打开方式..." → "配置默认编辑器..."
2. 在编辑器列表中选择 "文本编辑器"
3. 后续所有SVG文件将默认显示源代码

选项B：手动修改配置文件

1. 按下 Ctrl+,（Windows/Linux）或 Command+,（Mac）打开设置
2. 搜索栏输入 workbench.editorAssociations
3. 点击"在settings.json中编辑"进入配置文件
4. 添加以下规则：

"workbench.editorAssociations": {
  "*.svg": "default"  // 将svg关联至默认文本编辑器
}

---

注意事项与补充技巧

1. 恢复预览模式：删除配置中的svg关联项，或改为：

   "*.svg": "imagePreview.previewEditor"

2. 快速切换技巧：已打开的SVG文件可通过右键标签页 → "重新打开编辑器" → 选择不同的打开方式
3. 扩展增强：安装SVG扩展插件可获得：
   • 代码/预览分屏视图
   • 实时渲染效果
   • 语法校验功能

---

配置原理解析

workbench.editorAssociations 设置采用键值对结构：

• 键：文件匹配模式（如 *.svg 或 *.test.svg）
• 值：编辑器类型标识符：
  • default：标准文本编辑器
  • imagePreview.previewEditor：图像预览模式
  • 扩展ID：如 vscode.svg-preview 等第三方编辑器

⚠️ 冲突解决：当多个规则匹配同一文件时，VS Code将优先使用最具体的匹配项（例如 *.icon.svg 优先级高于 *.svg）

通过上述方法，开发者可无缝切换SVG文件在VS Code中的查看方式。保留编辑器关联配置还能确保团队协作时统一开发环境体验。