VSCode 默认不渲染SVG图形，需安装SVG Viewer插件并手动刷新预览；它仅静态渲染、不支持JS/交互、不加载外部CSS或绝对路径图片，复杂场景须用浏览器验证。
VSCode 里打开 .svg 文件只看到 XML 源码，不是图？
默认情况下，VSCode 把 .svg 当纯文本处理，双击打开就是代码视图，不会渲染成图形。这不是你配置错了，是它本来就不干这事——没有内置 SVG 渲染器。
实操建议：
- 装一个轻量插件：
SVG Viewer（作者：cssho），装完后右键点击任意.svg文件 → 选Open Preview，就能在侧边栏看到实时渲染效果 - 别选
SVG Preview（同名但作者不同），那个已停止维护，对现代 SVG 特性（如<use href>、外部defs引用）支持差，容易白屏或漏元素 - 预览窗口不支持交互（比如 hover 动画、JS 绑定），仅静态渲染；如果 SVG 依赖内联 CSS 或
<style>块，SVG Viewer能正确解析，但外部 CSS 文件不会加载
保存代码后预览没自动刷新？
SVG Viewer 默认不监听文件变更，改完 .svg 必须手动右键 → Refresh Preview，否则看到的是旧图。这是最常被卡住的点。
实操建议：
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac）调出命令面板，输入SVG: Refresh Preview绑定快捷键（比如设为Ctrl+Alt+R），比右键快得多 - 如果用 Live Server 插件起本地服务，把 SVG 放进服务目录，用浏览器打开
http://localhost:5500/xxx.svg——这时刷新是自动的，且能跑 JS 和 CSS，但失去 VSCode 内联编辑+预览的连贯性 - 注意：某些构建工具（如 Vite、Webpack）会把 SVG 当资源处理，直接访问 dist 目录下的 SVG 可能因路径问题加载失败，此时预览仍应以源码文件为准
预览里中文乱码、字体不对、尺寸缩放异常？
SVG 是基于 XML 的文本格式，所有样式和字体都靠声明驱动。VSCode 预览器不走系统字体链，也不执行 CSS @import，更不读取操作系统字体配置。
实操建议：
- 确保 SVG 中文字使用
<text>标签且显式指定font-family，例如font-family="sans-serif"；避免写font-family="PingFang SC"这类系统专属字体名，预览器大概率 fallback 到默认无衬线体 - 宽度/高度写死（如
width="200"）比用viewBox+width="100%"更稳；后者在预览器中可能被忽略，导致图形挤压或空白 - 含
<image href="xxx.png">的 SVG，预览器只认相对路径（相对于 SVG 文件所在目录），且不支持data:URL 或绝对路径；图片路径错会显示红叉，但不报错提示
想边写边看动画或交互效果，VSCode 行不行？
不行。VSCode 的预览本质是调用 Chromium 渲染引擎的一个极简沙箱实例，不启用 JS 执行、不加载外部资源、不响应事件。哪怕你在 SVG 里写了 <script>alert(1)</script>，它也完全静默。
实操建议：
- 需要验证动画（
<animate>、CSS@keyframes）或 JS 交互，必须切到浏览器：用 Live Server 插件起服务，或直接拖进 Chrome/Firefox - 如果 SVG 是作为 React/Vue 组件内联使用的（比如
import MyIcon from './icon.svg'），VSCode 预览器完全无法模拟组件上下文，此时预览毫无意义，应直接跑 dev server 看真实集成效果 - 复杂图标库（如 Iconify）生成的 SVG，常含动态
id或运行时注入逻辑，这类文件在预览器中基本不可信，别依赖它做最终判断
真正麻烦的不是怎么打开预览，而是搞清它能做什么、不能做什么——它只是个“快照查看器”，不是浏览器替代品。一旦涉及动态行为、跨文件引用或构建流程，就得立刻切出去验证。
