vscode 中 svg 实时预览需装 svg viewer（cssho 版）插件，支持 style/css、href 引用及保存自动刷新；若不刷新，先检查文件是否被其他程序独占、是否为 html 内联 svg、插件是否启用；含 js 或媒体查询的 svg 必须用 live server + html 包裹调试。
VSCode 默认只显示 .svg 文件的 XML 源码，不渲染图形——装对插件、配好行为，才能边写 <path d=""></path> 边看效果。关键不是“能不能预览”，而是“改完保存后，右边是不是立刻出图”。
选哪个插件：认准 SVG Viewer（作者 cssho）
别搜 “SVG Preview”——同名插件有两个，另一个由 John P. R. Foster 维护，已多年未更新，在 VSCode 1.84+ 上会白屏或漏渲染 <use href></use>、外部 <defs></defs> 引用。而 SVG Viewer（cssho）专为现代 SVG 设计，支持：
• <style></style> 块内联 CSS 解析
• href 属性引用（如 <use href="#icon"></use>）
• 保存后自动刷新（前提是文件没被 Sketch / Illustrator 等独占）
• 右键导出 PNG、复制 SVG、缩放视图
预览不刷新？检查这三点
最常卡住的地方不是插件没装，而是刷新逻辑被阻断：
• .svg 文件正被其他程序打开（比如用 Adobe XD 拖进去了），VSCode 无法获取写权限，自动刷新失败
• 你改的是嵌在 HTML 里的内联 <svg></svg>，但 SVG Viewer 只监听独立 .svg 文件，对 HTML 中的 SVG 无反应
• 插件已安装但没启用：右键 .svg 文件 → 确认菜单里有 Open Preview，没有就重启 VSCode 或重装插件
含 CSS/JS 的 SVG 必须走浏览器路线
SVG Viewer 是纯渲染器，不执行 JS，也不计算 CSS 媒体查询或伪类（如 :hover）。一旦你的 SVG 里有：
• <style>@media (prefers-color-scheme: dark) { svg { fill: white } }</style>
• <script>document.querySelector('circle').addEventListener('click', ...)</script>
• 外部 CSS 文件（<link rel="stylesheet" href="theme.css">）
就必须放弃插件预览，改用 Live Server + HTML 包裹：<svg xmlns="http://www.w3.org/2000/svg">...</svg>
双编辑器布局：代码左写，图形右看
高效调试的核心姿势是拆分视图：
• 左侧标签页打开 icon.svg（源码模式）
• 右键同一文件 → Open Preview，它会在右侧新标签页或侧边栏打开渲染视图
• 修改左侧代码 → Ctrl+S 保存 → 右侧自动刷新（注意不是 Ctrl+Z 撤销后自动回退，必须显式保存）
• 如果右侧没动，先按 Ctrl+Shift+P → 输入 SVG: Refresh Preview 手动触发，再排查是否被独占
真正的坑不在安装步骤，而在“以为保存了就该刷新”——VSCode 不会监控文件句柄状态，它只管写入成功与否。只要外部程序锁着文件，哪怕你 Ctrl+S 十次，预览区看到的仍是上一版。
