GitHub README中SVG内嵌图片无法显示的问题求助

问题根源 #

你遇到的问题有两个核心原因：

• 你使用的GitHub链接是仓库文件的网页展示地址（blob路径），并非直接可访问的图片资源链接，浏览器无法将其解析为图片文件加载。
• 在foreignObject的XHTML内容区域内，错误使用了SVG专属的<image>标签，此处应遵循HTML规范使用<img>标签。

修复步骤 #

1. 替换为GitHub原始图片链接
   将原链接中的blob替换为raw，生成能直接加载的图片资源地址：

   https://raw.githubusercontent.com/Goth-Rei-Codes/goth-rei-codes/main/Images/propic.png
   

2. 改用HTML标准<img>标签
   在foreignObject的XHTML区域内，替换SVG的<image>为HTML的<img>，可额外添加样式属性控制图片显示效果。

修改后的完整SVG代码 #

<svg fill="none" viewBox="0 0 508 125" width="800" height="200" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <div class="dialogue-card" id="dialogue-box">
                <!-- 替换为HTML img标签并使用原始图片链接 -->
                <img src="https://raw.githubusercontent.com/Goth-Rei-Codes/goth-rei-codes/main/Images/propic.png" style="width:60px; height:60px; border-radius:50%;" />
                <div class="propic-container">
                    <div class="name-container">
                        <div class="dialogue-text">
                            <p>Welcome to my profile!</p>
                        </div>
                        <div class="arrow-down" id="next-dialogue"></div>
                    </div>
                </div>
            </div>
        </div>
    </foreignObject>
</svg>

额外提示 #

如果需要更规整的布局，可在XHTML的<div>内添加<style>块定义.dialogue-card、.propic-container等类的样式，确保整体显示符合预期。

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