如何在ASP.NET MVC4 Razor视图中正确显示SVG图片？

我帮你搞定这个SVG显示的问题！在ASP.NET MVC里没法显示SVG，大概率是MIME类型没配置对，或者引用方式有问题，咱们一步步来解决：

1. 先配置SVG的MIME类型（最关键的一步） #

IIS默认没有注册SVG的MIME类型，这会导致服务器不知道该怎么处理.svg文件，浏览器自然也识别不了。你需要在项目的Web.config里添加以下配置：

<system.webServer>
  <staticContent>
    <remove fileExtension=".svg" /> <!-- 先移除可能存在的重复配置，避免冲突 -->
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  </staticContent>
</system.webServer>

配置完记得重启你的开发服务器或者IIS，让设置生效。

2. 在Razor视图里正确引用SVG文件 #

和引用PNG、JPG的逻辑一样，但要注意路径的正确性：

• 如果SVG放在Content文件夹下（比如~/Content/images/logo.svg），用Url.Content生成绝对路径最稳妥：

<img src="@Url.Content("~/Content/images/logo.svg")" alt="网站Logo" />

• 也可以用相对路径，但要确保视图文件和SVG的相对位置正确，比如从Views/Home/Index.cshtml引用Content下的SVG：

<img src="../../Content/images/logo.svg" alt="网站Logo" />

⚠️ 注意：文件名大小写尽量统一，虽然Windows服务器不区分，但部署到Linux环境会严格区分，避免后续踩坑。

3. 检查文件权限 #

如果配置完MIME类型、路径也对，但还是显示不了，大概率是权限问题。确保IIS应用程序池的身份账号（比如IIS AppPool\你的应用池名称）有读取SVG文件所在文件夹的权限。

4. 内嵌SVG（灵活备选方案） #

如果你的SVG是小图标或者简单图形，直接把SVG代码内嵌到Razor视图里也是个好办法，不用依赖外部文件，还能直接用CSS修改样式：

<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="40" height="40" fill="#2196F3" rx="8" />
  <circle cx="30" cy="30" r="15" fill="#FFFFFF" />
</svg>

最后，用浏览器开发者工具（F12）排查问题：如果SVG返回404，检查路径；返回403，检查权限；返回200但不显示，看Response Headers里的Content-Type是不是image/svg+xml，确保MIME类型配置生效。

内容的提问来源于stack exchange，提问作者Haytham