必须装SVG Viewer（作者cssho），它支持内联CSS、href引用及保存自动刷新；而同名的SVG Preview（John P. R. Foster版）已过时，易白屏且不兼容VSCode 1.84+。
VSCode 本身不渲染 SVG，双击只显示 XML 源码——这不是配置问题，也不是插件没装对，是编辑器根本没集成 SVG 渲染引擎。想边写 <circle cx="50" r="20"></circle> 边看见圆，必须靠外部工具补足这一环。
装哪个插件才真正能渲染 SVG？
只认 SVG Viewer（作者 cssho），别选同名但作者是 John P. R. Foster 的 SVG Preview。
-
SVG Preview已多年未更新，在 VSCode 1.84+ 上常见白屏、<use href="#icon"></use>不渲染、外部<defs></defs>引用失效 -
SVG Viewer支持内联<style></style>、href属性、<symbol></symbol>引用，保存后默认自动刷新（前提是文件未被独占） - 安装后无需重启，右键任意
.svg文件 → 点Open Preview，即在侧边栏或新标签页打开图形视图
为什么改了代码，预览不刷新？
90% 的“不动”不是插件坏了，而是刷新链路断在以下三处：
-
.svg文件正被 Sketch / Illustrator / Figma / Chrome 等程序打开——VSCode 失去读取权限，无法监听变更 - 你编辑的是 HTML 中的内联
<svg></svg>，但SVG Viewer只监听独立.svg文件，对嵌入式 SVG 完全无感 - 插件已安装但未启用：右键
.svg文件，菜单里没有Open Preview→ 重启 VSCode 或重装插件
含 CSS 媒体查询或 JS 的 SVG 怎么预览？
SVG Viewer 是纯渲染器，不执行 JS、不计算 @media、不加载外部 CSS、不解析 @import。一旦 SVG 里有这些，插件预览就不可靠。
- 例如：
<style>@media (prefers-color-scheme: dark) { svg { fill: white } }</style>→ 预览器只渲染初始浅色态 - 例如：
<script>document.querySelector('circle').onclick = ...</script>→ 点击无响应 - 正确做法：新建
preview.html，与logo.svg同目录，内容为：<!DOCTYPE html> <html><body style="margin:0"> <svg xmlns="http://www.w3.org/2000/svg"> <!-- 粘贴 SVG 内容 --> </svg> </body></html>
右键preview.html→Open with Live Server
中文、字体、图片路径为什么显示异常？
预览器不走系统字体链，也不支持绝对路径或 data URL，所有资源都依赖声明是否“可静态解析”：
-
<text font-family="PingFang SC"></text>→ fallback 到默认无衬线体；应改用font-family="sans-serif"或显式 Web 安全字体 -
<image href="/assets/logo.png"></image>→ 路径错，显示红叉；只认相对路径，如./logo.png -
<image href="data:image/png;base64,..."></image>→ 不支持，直接忽略 -
width="100%" height="100%" viewBox="0 0 100 100"→ 在预览器中可能被忽略，导致图形挤压；建议写死宽高或用width="200"更稳
复杂点在于：预览行为完全取决于 SVG 是否“纯声明式”。只要引入任何运行时逻辑（JS、CSS 计算、外部资源加载），就必须离开 VSCode 插件环境，进浏览器验证——这不是妥协，是职责边界。
