vscode默认不渲染svg，必须安装插件（如svg viewer或live svg previewer）才能预览图形；双击仅显示xml源码，settings.json等配置无效；含交互、外部css或复杂特性的svg需用live server在浏览器中验证。
VSCode 默认不渲染 SVG，装插件是唯一可行路径
双击 .svg 文件只会打开 XML 源码，<path d="..."></path> 这类代码不会自动变成图形——这不是配置问题，是 VSCode 本身的设计限制。任何“不用插件就能预览”的说法都不成立，包括修改 settings.json 或启用内置图片缩略图（1.84+ 版本仅对 PNG/JPG 显示缩略图，.svg 仍显示源码）。
选 SVG Viewer 还是 Live SVG Previewer？看你的工作流
两个主流插件差异明显，不是“哪个更好”，而是“哪个更贴你当前场景”：
-
SVG Viewer（作者 cssho）：轻量、稳定、启动快；双击文件自动打开侧边栏预览；但默认**不自动刷新**，保存后必须手动右键 →Refresh Preview，或绑定快捷键Ctrl+Alt+R（通过Ctrl+Shift+P→ 输入SVG: Refresh Preview设置） -
Live SVG Previewer：支持保存即刷新，省去手动操作；但部分用户反馈在大文件或含大量<use></use>引用的 SVG 中偶发卡顿；不提供源码/图形同屏切换按钮，调试时需来回切标签页
预览器里文字乱码、CSS 不生效？不是插件 bug，是 SVG 写法问题
VSCode 的 SVG 预览器不走系统字体链，也不解析 @import 或外部 CSS 文件，所有样式必须内联或写在 <style></style> 标签里，且字体名要保守：
- 避免写
font-family="PingFang SC"、"Microsoft YaHei"等系统专属字体；改用font-family="sans-serif"或font-family="Arial, sans-serif" - 中文文本务必用
<text></text>标签包裹，不要依赖<foreignobject></foreignobject>+ HTML 渲染（预览器不执行 JS，也不加载外部资源） - 绝对路径图片（如
href="/assets/logo.png"）会失效；改用相对路径，且确保文件在当前工作区根目录下可被找到
复杂 SVG 必须用浏览器验证，VSCode 预览只是第一道眼
带交互逻辑（<script></script>）、CSS 动画、<defs></defs> 多层引用、滤镜（<filter></filter>）或混合模式（mix-blend-mode）的 SVG，在 VSCode 插件里大概率渲染异常或空白。这时必须：
- 用
Live Server插件起本地服务，把 SVG 放进 HTML 里用<img src="xxx.svg">或直接内联，再访问http://localhost:5500/xxx.html - 注意：浏览器中能跑 ≠ VSCode 预览器能跑；两者渲染引擎不同，前者基于 Blink/WebKit，后者是精简版 DOM 解析器
真正容易被忽略的是：预览器对 viewBox 缩放、preserveAspectRatio 处理较弱，有时图形显示偏移或裁剪，但浏览器完全正常——别急着改代码，先切到浏览器确认是不是预览器能力边界问题。
