PHP生成SVG中嵌入子SVG在HTML中不显示的问题排查

问题分析与解决：HTML中加载PHP生成的SVG时子图标不显示 #

你遇到的情况是：

• 直接访问PHP生成的SVG时，内部引用的子SVG图标正常显示，子SVG不存在时也会显示错误图标；
• 但把这个SVG通过HTML的<img>标签引用时，子图标完全不显示，甚至子SVG不存在的错误图标也看不到，只有背景和文本正常。

原因 #

浏览器对<img>标签加载的SVG有资源加载限制：
当SVG作为独立文档（直接打开）时，浏览器将其当作顶级HTML/XML文档处理，允许加载外部资源；但当SVG作为<img>的源文件时，浏览器会把它当成图片资源，遵循更严格的安全策略，禁止加载外部资源（包括其他SVG文件），这是为了防止恶意资源的风险。

解决方法 #

以下是几种可行的修改方案，按推荐程度排序：

1. 内联子SVG代码（最可靠）

直接把子SVG的内容嵌入到主SVG中，而不是通过<image>引用外部文件。PHP读取子SVG文件后，去掉其独立的XML声明和根<svg>标签，只保留内部元素，插入到主SVG的合适位置：

修改PHP代码中图标部分：

// 处理子SVG图标
$iconPath = './icons/' . $sType . '.svg';
$iconElements = '';
if (file_exists($iconPath)) {
    // 读取子SVG内容
    $svgContent = file_get_contents($iconPath);
    // 移除XML声明和外层svg标签，只保留内部元素
    $svgContent = preg_replace('/<\?xml.*?\?>/', '', $svgContent);
    preg_match('/<svg[^>]*>(.*?)<\/svg>/s', $svgContent, $matches);
    if (!empty($matches[1])) {
        $iconElements = $matches[1];
    }
} else {
    // 子SVG不存在时，插入默认错误图标元素
    $iconElements = '<rect width="50" height="50" fill="#FCFCFC" /><text x="25" y="25" font-size="14" dominant-baseline="middle" text-anchor="middle" fill="#FF0000">!</text>';
}

// 在主SVG中插入图标（用g标签定位，替代原来的image标签）
echo '<g transform="translate(' . (200*0.1) . ', ' . (100*0.32) . ') scale(0.5)">' . $iconElements . '</g>';

注：scale(0.5)是根据子SVG的原始尺寸调整，确保图标大小符合需求，可根据实际情况修改。

2. 将子SVG转为Data URI嵌入

把SVG文件编码成Data URI格式，直接写入<image>的href属性，这样无需加载外部文件：

修改PHP代码中图标部分：

$iconPath = './icons/' . $sType . '.svg';
$iconData = '';
if (file_exists($iconPath)) {
    $svgContent = file_get_contents($iconPath);
    // 编码为base64格式的Data URI
    $encoded = base64_encode($svgContent);
    $iconData = 'data:image/svg+xml;base64,' . $encoded;
} else {
    // 子SVG不存在时，使用默认错误图标的Data URI
    $iconData = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjRkNGQ0ZDIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTQiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlx1MDAzNzwvdGV4dD4KPC9zdmc+';
}

// 输出image标签
echo '<image x="10%" y="32%" width="50px" height="50px" href="' . $iconData . '" />';

3. 尝试调整服务器跨域配置（不推荐）

通过服务器配置（如Apache的Access-Control-Allow-Origin）允许SVG资源的跨域访问，但这种方法不一定可靠，因为浏览器对<img>中SVG的资源加载限制本质是安全策略，跨域配置可能无法完全绕过。

原代码问题总结 #

你使用的<image>标签引用外部SVG的方式，在SVG作为独立文档时有效，但在<img>中被浏览器的安全策略拦截，导致外部资源无法加载，所以子图标和错误图标都无法显示。

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