EPUB中<img>引用的SVG内嵌JPG无法显示的问题排查

我正在创建一个能正确显示特定图片的EPUB文件，相关页面是简单的XHTML文件，代码如下：

<img src="quentin_reynolds_01.svg" />

该SVG文件由Inkscape创建并保存为“plain svg”，核心代码片段如下：

<image width="326.18069" height="407.08585" preserveAspectRatio="none" xlink:href="radio-news-journalist-and-world-war-ii-war-correspondent-news-photo.jpg" id="image1" x="-44.927532" y="-34.021095" clip-path="url(#clipPath2)" transform="matrix(1.0712413,0,0,1.0712413,-4.3604899,-8.6258754)" />

这个SVG在多数SVG查看器（比如浏览器）里能正常显示，但在Calibre电子书编辑器及阅读器中出现异常：所有文件都已导入EPUB且无父目录，单独预览JPG、SVG都正常，但预览XHTML时只显示空白框，Calibre阅读器也没显示损坏图标。想问这是文件有误还是认知偏差？

• 核心原因：Calibre对SVG的渲染遵循更严格的EPUB规范，不像浏览器有强容错性，你的问题大概率出自以下两点：

  1. 无效的clip-path引用：SVG里写了clip-path="url(#clipPath2)"，但如果文件中没有定义对应的<clipPath id="clipPath2">元素，Calibre会直接丢弃整个<image>节点，导致空白。浏览器会忽略无效的裁剪路径继续显示图片，但Calibre不会。
  2. 缺失XLink命名空间：SVG使用了xlink:href属性，但根元素<svg>没有声明xmlns:xlink="http://www.w3.org/1999/xlink"命名空间，Calibre无法识别这个属性，自然找不到引用的JPG文件。浏览器会自动补全该命名空间，所以能正常显示。

• 修复步骤：

  1. 补全XLink命名空间：打开SVG文件，确保根<svg>标签包含命名空间声明：

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="..." height="...">
     

  2. 处理clip-path：
     • 如果不需要裁剪效果，直接删除clip-path="url(#clipPath2)"这一段代码；
     • 如果需要裁剪，检查SVG的<defs>区域是否存在完整的clipPath定义，比如：

       <defs>
         <clipPath id="clipPath2">
           <!-- 这里是裁剪用的形状，比如<rect x="0" y="0" width="326" height="407" /> -->
         </clipPath>
       </defs>
       

  3. （可选）调整缩放规则：把preserveAspectRatio="none"改为preserveAspectRatio="xMidYMid meet"，避免图片因缩放被移出可视区域。

修改完成后重新保存SVG，导入EPUB再用Calibre测试即可。

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