iframe内SVG本地渲染正常，远程Apache服务器显示为文本的原因

问题根源 #

远程Amazon Linux环境的Apache 2.4服务器未配置SVG文件的正确MIME类型，导致浏览器将SVG解析为纯文本而非图像格式。本地Windows Apache默认已包含该配置，因此可正常渲染。

解决方案 #

方法1：修改全局MIME类型配置 #

1. 打开Apache的mime.types文件，Amazon Linux上通常路径为/etc/httpd/conf/mime.types
2. 检查是否存在以下配置行：

   image/svg+xml svg
   

3. 若不存在，添加该行后重启Apache服务：

   sudo systemctl restart httpd
   

方法2：通过.htaccess配置（仅当前站点生效） #

1. 在网站根目录创建或编辑.htaccess文件，添加以下内容：

   AddType image/svg+xml .svg .svgz
   

2. 确保Apache配置中允许该目录使用.htoverride：在httpd.conf对应站点的<Directory>块中设置AllowOverride All
3. 重启Apache服务

验证配置生效 #

使用curl命令检查SVG文件的响应头，确认Content-Type是否正确：

curl -I https://你的域名/路径/目标.svg

正常响应应包含Content-Type: image/svg+xml

截图情况说明 #

• 本地服务器：object元素展开后显示#document及<svg>标签，SVG正常渲染为图像
• 远程服务器：object元素展开后显示#document及<html>标签，SVG源码被包裹在<pre>标签内，以纯文本形式展示

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