必须启用SVG Viewer（作者cssho）并解除.svg文件的plaintext关联，否则右键无Open Preview；预览空白主因是外部引用失效或文件被其他程序占用；自动刷新失败多因读写权限被Sketch/Figma等抢占。
为什么装了SVG Viewer还是只看到XML源码
不是插件没装对，是 VSCode 默认把 .svg 文件关联到了文本编辑器。右键文件时如果菜单里没有 Open Preview，说明插件虽已安装但未生效——常见于插件被禁用、VSCode 缓存未刷新或工作区禁用了该扩展。
检查步骤：
• 打开命令面板（Ctrl+Shift+P），输入 Extensions: Show Enabled Extensions，确认 SVG Viewer（作者 cssho）在列表中且状态为启用
• 右键任意 .svg 文件，看是否有 Open Preview 项；没有就重启 VSCode（不是重载窗口）
• 切换到工作区设置（settings.json），删掉可能存在的 "files.associations": { "*.svg": "plaintext" } 这类强制关联
预览窗口打开但内容为空白或白屏
90% 的空白来自三类路径/引用问题：外部资源加载失败、跨域限制、或插件版本不匹配。
SVG Viewer（cssho 版）只解析内联结构，不走网络请求，也不支持 file:// 协议下的相对路径解析。常见表现：
• <image href="assets/icon.png"> → 显示空白（不加载外部图片）
• <use href="#logo"> → 元素消失（#logo 定义在另一个文件里）
• <style>@import "theme.css";</style> → 样式失效（不解析 @import）
• SVG 中含 url(#filter1) 但 <filter id="filter1"> 在外部 <defs> 文件中 → 滤镜不生效
解决方法：
• 把所有 <defs>、<symbol>、<style> 内容复制进当前 .svg 文件，做成自包含 SVG
• 替换 <image href="..."/> 为 base64 内联数据（如 href="data:image/png;base64,iVBOR..."）
• 删除或注释掉所有 @import、@media、url() 声明
修改保存后预览不自动刷新
自动刷新依赖文件系统监听，一旦被其他进程抢占读写权限，VSCode 就静默失败——这是最隐蔽也最高频的卡点。
排查顺序：
• 关闭 Sketch、Figma、Illustrator、Chrome（尤其是拖拽打开过该 SVG 的标签页）
• 在终端执行 lsof -i | grep your-file.svg（macOS/Linux）或 handle.exe your-file.svg（Windows + Sysinternals）确认无占用
• 检查插件设置："svgViewer.autoRefresh": true 是否在用户或工作区设置中启用
• 若仍无效，手动触发：Ctrl+Shift+P → 输入 SVG: Refresh Preview
注意：SVG Viewer 不监听 HTML 中的内联 <svg>，只监控独立 .svg 文件。改的是 index.html 里的 <svg>？那它根本不会响应。
含 JS 或 CSS 媒体查询的 SVG 怎么调试
SVG Viewer 是纯静态渲染器，不执行 JS、不计算 @media、不触发 :hover、不加载外部字体——它连 document 对象都没有。
必须切换到浏览器环境，但不能直接双击打开 .svg 文件（file:// 协议下 JS 被禁用、CORS 阻断）：
• 安装 Live Server 插件
• 新建 preview.html，内容为：
<!DOCTYPE html><br><html><body><br><iframe src="icon.svg" width="100%" height="600"></iframe><br></body></html>
• 确保
icon.svg 和 preview.html 在同一目录• 右键
preview.html → Open with Live Server• 后续修改并保存
icon.svg，浏览器会自动刷新
真正容易被忽略的是：插件预览里看似正常的 viewBox 缩放、文字对齐、渐变坐标，在浏览器中可能偏移——别急着改代码，先切过去确认是不是渲染引擎差异导致的假问题。
