VSCode 默认不渲染 SVG，需装 SVG Viewer（cssho 版）插件；它支持内联 CSS、href 引用、自动刷新及右键导出，而 SVG Preview（John P. R. Foster 版）已过时且存在白屏等问题。
VSCode 默认不渲染 SVG 图形，只显示 XML 源码——这不是配置问题，是编辑器本身没集成 SVG 渲染引擎。想边写 <path d="M0,0 L10,10"></path> 边看效果，必须靠插件或浏览器配合，且选错插件、路径写错、文件被独占，都会导致“改了但没刷新”。
认准 SVG Viewer（作者 cssho），别装 SVG Preview（John P. R. Foster）
VSCode 市场里有两个名字高度相似的插件：SVG Viewer（作者 cssho）和 SVG Preview（作者 John P. R. Fosters）。后者已多年未更新，在 VSCode 1.84+ 上会出现白屏、漏渲染 <use href="#icon"></use>、无法解析外部 <defs></defs> 引用等问题。
SVG Viewer（cssho 版）专为现代 SVG 设计，支持：
-
<style></style>块内联 CSS 解析（fill: red、stroke-width: 2都能生效） -
href属性引用（如<use href="#logo"></use>） - 保存后自动刷新（前提是文件未被 Sketch / Illustrator / XD 独占）
- 右键导出 PNG、复制 SVG、缩放视图
预览不刷新？先查这三点
90% 的“预览不动”不是插件没装好，而是刷新链路被阻断：
-
.svg文件正被其他程序打开（比如拖进 Adobe XD 编辑中），VSCode 失去文件写权限，自动刷新失败 - 你改的是 HTML 里的内联
<svg></svg>，但SVG Viewer只监听独立.svg文件，对 HTML 中的 SVG 完全无反应 - 插件已安装但未启用：右键任意
.svg文件 → 确认菜单里有Open Preview；没有就重启 VSCode 或重装插件
含 CSS 媒体查询或 JS 的 SVG 必须走 Live Server + HTML
SVG Viewer 不执行 JavaScript、不加载外部 CSS、不解析 @import 或媒体查询。如果你的 SVG 里写了 @media (prefers-color-scheme: dark) 或绑定了 onclick，预览窗口只会静态渲染初始状态。
这时必须用浏览器环境：
- 新建
preview.html，与logo.svg同目录 - 内容写成：
<!DOCTYPE html> <html><body> <iframe src="logo.svg" width="100%" height="600"></iframe> </body></html>
- 右键
preview.html→Open with Live Server - 修改并保存
logo.svg，浏览器会自动刷新
注意：src 必须是相对路径（如 "logo.svg"），不能是 file:///xxx/logo.svg —— Live Server 不认 file:// 协议。
内联 SVG 快速调试：选中代码 → Preview SVG
在 HTML 或 Markdown 文件里写内联 SVG（比如响应式图标或带 class 的 <svg></svg>），不用保存也能预览：
- 鼠标选中从
<svg> 到 <code>的完整代码块 - 右键 →
Preview SVG（由SVG Viewer提供） - 弹出小窗口即时渲染，适合验证
viewBox缩放、CSS 类影响、<use></use>引用是否正确
这个功能不依赖文件保存，也不受外部程序独占干扰，是调试内联 SVG 最轻量的路径。
最常被忽略的一点：SVG Viewer 的“自动刷新”只对独立 .svg 文件有效，且完全不处理 HTML 内联、JS 动态插入、外部 CSS 或字体加载。一旦涉及这些，就得切到浏览器——不是插件不行，是职责边界不同。
