认准 SVG Viewer(作者 cssho)才能在 VSCode 中可靠预览 SVG:支持内联 CSS、href 引用、自动刷新及导出;不渲染 JS、@media、外部资源;嵌入式 SVG 和被其他程序占用时失效,最终需浏览器验证。

别装 SVG Previewer(John P. R. Foster 版)——它在 VSCode 1.84+ 上已失效,白屏、
认准 SVG Viewer(作者 cssho)才真正能预览
VSCode 自身不带 SVG 渲染引擎,双击 .svg 文件永远只显示 XML 源码。唯一可靠路径是装对插件:SVG Viewer(作者必须是 cssho)。它专为现代 SVG 设计,支持:
-
<style>块内联 CSS(fill: #333、stroke-width: 2都生效) -
href属性引用(如<use href="#icon">) - 保存后默认自动刷新(前提是文件未被其他程序独占)
- 右键预览区可导出 PNG、复制 SVG、缩放/重置视图
预览不刷新?先查这三处硬性阻断点
90% 的“改了代码但预览没变”不是插件问题,而是刷新链路被物理切断:
- .svg 文件正被 Sketch / Figma / Illustrator / Chrome 打开——VSCode 失去读取权限,自动刷新静默失败
- 你编辑的是 HTML 中的内联
<svg>,而SVG Viewer只监听独立 .svg 文件,对嵌入式 SVG 完全无感 - 插件已安装但未启用:右键任意 .svg 文件 → 菜单里没有
Open Preview→ 重启 VSCode 或重装插件
含 JS、@media、url() 的 SVG 别指望插件渲染
SVG Viewer 是纯静态渲染器,不执行 JS、不计算 @media 查询、不加载外部 CSS、不解析 @import 或 url()(比如 background: url(./bg.svg)):
- 如果 SVG 里有
<script>或onclick,预览只显示初始快照 - 含
@media (prefers-color-scheme: dark)的样式,在预览中不会切换 - 必须调试这类 SVG?用
Live Server插件起本地服务,新建preview.html,内容为:<iframe src="icon.svg" width="100%" height="600"></iframe>
,然后右键打开 —— 浏览器环境才真正跑得动
真正容易被忽略的是:预览器对 viewBox 缩放、preserveAspectRatio 的处理偏弱,图形偶尔偏移或裁剪;而浏览器(Blink/WebKit)才是最终检验场。写完图标先看插件预览,交到前端或设计走之前,务必扔进浏览器再过一遍。


















