VSCode默认不渲染SVG图形，需用SVG Viewer插件双击预览或Live Server在浏览器中真实运行。插件仅支持SVG，自动刷新且响应快；含CSS/JS的SVG必须走HTML+Live Server路线；单文件打开会导致路径解析失败。
VSCode 默认不渲染 SVG 图形，只显示 XML 源码；要真正“看到图”，必须借助插件或绕道 HTML 浏览器预览——没有例外，装错插件或漏掉关键步骤，就只能对着 <path d="..."> 猜形状。
用 SVG Viewer 插件实现双击即预览
这是目前最轻量、响应最快、且支持自动刷新的方案。它专为 SVG 设计，不是通用图片预览器，所以不会在 PNG 上凑数干扰判断。
- 安装插件时认准作者
cssho，搜索SVG Viewer，别选错名字相近的SVG Preview（后者已多年未更新，不支持 VSCode 1.84+ 的新 API） - 安装后无需重启，直接双击项目中的
icon.svg文件，就会在右侧或新标签页自动打开渲染视图 - 保存 SVG 源码时，预览窗口默认自动刷新——但前提是文件没被其他程序独占（比如同时用 Sketch 打开该文件，就会卡住不刷新）
- 右键预览区域可导出 PNG、复制 SVG 代码、缩放/重置视图；按
Ctrl+Shift+P输入SVG: Open Preview也能手动触发
用 Live Server + 内联 HTML 实现真实环境预览
当 SVG 含有 <style>、CSS 类、@media 查询或 JS 交互时，插件预览会失效——它不运行 CSS 计算或 JS 引擎。这时必须走浏览器路线。
- 新建一个临时
preview.html，内容极简：<!DOCTYPE html> <html><body> <iframe src="./logo.svg" width="100%" height="600"></iframe> </body></html>
- 确保
logo.svg和preview.html在同一目录；路径不能写成file:///xxx/logo.svg，Live Server 不认file://协议 - 右键
preview.html→Open with Live Server，浏览器打开后修改 SVG 并保存，页面自动刷新 - 若需调试响应式行为，把
<iframe>换成内联<svg>更直接，但注意：内联时 SVG 中的id可能与页面其他元素冲突
为什么内置“图片预览”对 SVG 无效
VSCode 1.84+ 虽然支持双击 PNG/JPG 显示缩略图，但对 SVG 文件，它只做一件事：高亮 XML 语法。这不是 bug，是设计使然——SVG 是文本格式，渲染逻辑远超编辑器职责范围。
- 你在资源管理器里悬停 SVG 文件图标，看到的只是小段 XML 截图，不是图形
- 设置里开启
Workbench > Explorer: Show Preview for Images对 SVG 完全无影响 - 试图用
Reopen with Editor → Image Preview强制切换，结果仍是源码视图，因为底层没绑定 SVG 渲染器 - 唯一能触发“图片式”缩略图的 SVG 场景，是把它作为
<img src="icon.svg">嵌在 HTML 里，再用 Live Server 预览整个页面
内联 SVG 片段快速调试技巧
写 Markdown 或 HTML 时临时加一段 SVG，不想建新文件？这个功能藏得深但极实用。
- 在
index.html或readme.md里写下完整 SVG 标签块（从<svg到</svg>），必须闭合 - 鼠标选中整段 SVG 代码（包括起始和结束标签），右键 →
Preview SVG（由 SVG Viewer 提供） - 预览窗口会实时渲染该片段，且不受外部 CSS 影响——适合验证
d属性路径是否正确、viewBox缩放是否合理 - 注意：如果选区包含换行符或空格太多，部分版本会解析失败，建议保持标签紧凑，例如
<svg viewBox="0 0 24 24"><path d="M12..."></path></svg>
最容易被忽略的是文件权限和路径上下文：插件预览依赖 VSCode 对当前工作区的路径解析能力，如果用 File > Open File... 单独打开 SVG，而不是 File > Open Folder... 打开整个项目，很多相对路径引用和自动刷新都会静默失败。动手前先确认左下角状态栏显示的是文件夹名，不是“No Folder Opened”。
