vscode本身不渲染svg，必须依赖插件或浏览器实现预览；默认双击仅显示xml源码，是设计使然。推荐安装作者cssho的svg viewer插件，双击打开预览，但需手动刷新（建议绑定ctrl+alt+r快捷键）；含css/js/响应式特性的svg必须用live server在浏览器中预览。
VSCode 本身不渲染 SVG，所谓“实时预览”其实是靠插件模拟或绕道浏览器实现的；直接双击 .svg 文件看到 XML 源码，不是 bug，是设计如此——别浪费时间调设置找开关。
用 SVG Viewer 插件实现代码改完就看见图
这是最接近“边写边看”的方案，但必须装对插件、设好刷新习惯，否则改了代码也白改。
- 只认作者
cssho的SVG Viewer，别选同名但作者为John P. R. Foster的SVG Preview（已停止维护，<use href></use>、外部<defs></defs>引用大概率白屏） - 安装后双击 .svg 文件自动打开预览，但保存后不会自动刷新——这是 90% 新人卡住的地方
- 手动刷新快捷键建议绑定：
Ctrl+Shift+P→ 输入SVG: Refresh Preview→ 设为Ctrl+Alt+R（Mac 用Cmd+Alt+R），比右键快得多 - 预览窗口不执行 JS、不加载外部 CSS、不解析
@import，所有样式必须内联或写在<style></style>块里
含 CSS/JS/响应式的 SVG 必须走 Live Server 浏览器路线
一旦 SVG 里用了 @media、hover 动画、<script></script> 或依赖构建工具生成的路径（如 Vite 的 import.meta.env.BASE_URL），插件预览立即失效。
- 新建一个
preview.html和 SVG 放同一目录，内容写成：<svg xmlns="http://www.w3.org/2000/svg"><!-- 复制 SVG 内容到这里 --></svg>
- 右键
preview.html→Open with Live Server，浏览器打开后，每次保存 SVG 源码都会自动刷新 - 注意：不要用
<img src="xxx.svg">嵌入，那样会丢失内联样式和 JS 上下文；必须内联<svg></svg> - 如果 SVG 有
id（比如<circle id="handle"></circle>），确保页面其他地方没重复id，否则 JS 选不到元素
预览里字体乱、图片不显示、尺寸错位？问题都在路径和声明上
VSCode 预览器不走系统字体链、不读操作系统配置、也不解析相对路径以外的资源引用——它只按 XML 规则硬解。
- 中文显示异常？别写
font-family="PingFang SC"，改用font-family="sans-serif"或显式声明 Web 安全字体栈 -
<image href="icon.png"></image>只支持相对于 .svg 文件的路径，href="../assets/icon.png"可以，href="/assets/icon.png"或href="data:image/png,..."直接红叉且无提示 - 图形挤压或空白？优先用固定宽高：
width="200" height="200"，慎用viewBox="0 0 100 100" width="100%"——预览器对百分比解析不稳定 - 颜色不对？确认没漏写
fill或stroke，预览器不会 fallback 到 CSS 继承链，每个元素样式得写死
内联 SVG 片段怎么快速验证效果
在 HTML 或 Markdown 里写 <svg></svg> 标签时，不用保存整个文件也能看图——前提是选中完整标签块。
- 鼠标拖选从
<svg> 开始到 <code>结束的所有内容（包括换行） - 右键 →
Preview SVG（由SVG Viewer提供），立刻弹出渲染视图 - 这个功能对调试 CSS 影响特别有用，比如加了
svg { filter: drop-shadow(...) }后是否生效，一眼可知 - 但注意：选区必须严格闭合，多一个
或少一个>都会导致预览失败，且无错误提示
真正麻烦的从来不是“怎么看到图”，而是“为什么看到的和浏览器里不一样”——SVG Viewer 是个静态 XML 渲染器，Live Server 才是真实运行环境。复杂动画、字体渲染、跨域图片、CSS 变量这些，插件预览永远给不了答案，该切浏览器的时候别犹豫。
