PhpStorm 不支持 SVG 悬停预览或实时渲染，仅能双击打开真实存在的 SVG 文件调用内置查看器（显示 viewBox 等属性但不执行 CSS/JS），无法从 HTML/Markdown 路径跳转预览，也无有效插件补足该功能，需依赖浏览器预览验证样式与交互。
PhpStorm 无法像 VSCode 那样通过插件实现 SVG 悬停预览或侧边栏实时渲染——它压根不提供这类功能，也不存在“启用 SVG 预览”的设置开关。你双击项目里的 icon.svg 文件，看到的是 XML 源码，不是图形，这不是 bug，是设计如此。
双击打开即用内置查看器（仅限真实文件）
PhpStorm 唯一原生支持的 SVG 查看方式，就是把它当普通图片文件对待：只要文件真实存在、路径未被 IDE 排除、后缀正确，就能双击调起内置查看器。
- 确保
icon.svg在 Project 工具窗口中可见（没被.gitignore或Settings > Directories标为 excluded） - 检查
Settings > Editor > File Types中，.svg是否映射到 Image 类型（不是 Text）；若被错配成 Text，双击只会打开代码编辑器 - 双击后弹出的查看器支持缩放、旋转、EXIF（对 SVG 显示 viewBox/width/height 等基础属性），但不执行任何 CSS 或 JS
- 不支持从 HTML 或 Markdown 中的
跳转预览——光标停在路径上按Ctrl+Click会提示Cannot find declaration
为什么不能像 VSCode 那样自动渲染 SVG
IntelliJ 平台对文本中路径字符串的语义识别能力弱，无法像 VSCode 那样精准捕获 ./src/icons/close.svg 并触发 hover 渲染。更关键的是：SVG 是 XML 文本格式，而 PhpStorm 的“图片查看器”只做像素级渲染，不启动 HTML 解析引擎，所以它不会尝试解析和绘制 <path d="...">。
- 没有插件能真正补足这个缺口——你在 Plugins 市场搜
SVG Preview，结果全是图标字体渲染器或已弃更的旧版，无一支持动态渲染 - 强行拖入 VSCode 的
.vsix插件会直接报错，平台 API 完全不兼容 - 所谓“SVG 编辑器”插件（如 SVG Support）只提供语法高亮、自动补全、结构折叠，跟图形预览无关
需要图形化验证时，必须走浏览器路线
如果你改了 SVG 的 <style> 或加了 @media 查询，内置查看器完全看不到效果。这时唯一可靠的方式，是用 PhpStorm 内置的浏览器预览能力，模拟真实运行环境。
立即学习“PHP免费学习笔记（深入）”；
- 右键 HTML 文件 →
Open in Browser（需先在Settings > Tools > Web Browsers配好 Chrome/Firefox 路径） - 或者启用
Settings > Tools > Browser Live Preview，勾选Reload page on changes，保存 SVG 后页面自动刷新 - 推荐写一个极简
preview.html：<html><body style="margin:0"><svg xmlns="http://www.w3.org/2000/svg"><!-- 粘贴 SVG 内容 --></svg></body></html>
，避免<img src="xxx.svg">—— 后者无法调试样式和交互 - 注意：不要双击 HTML 文件本地打开（
file://协议），浏览器收不到image/svg+xmlMIME 类型，SVG 会加载失败
真正容易被忽略的点在于：很多人以为“IDE 支持图片预览”就等于“支持所有图片格式的图形化展示”，但 SVG 的本质是可执行的 XML，它的渲染依赖完整的 HTML/CSS/JS 上下文。PhpStorm 不提供那个上下文，也没打算提供。
