为什么内嵌image元素的SVG在渲染时顶部会出现多余空白？

你遇到的SVG中图片顶部出现空白的问题，核心原因是<image>元素的默认preserveAspectRatio配置与图片宽高比不匹配导致的：
<image>默认的preserveAspectRatio属性值为xMidYMid meet，作用是保持图片原始宽高比，等比缩放到完全适配SVG视口后居中显示。当图片自身的宽高比和你设置的SVG宽高比不一致时，就会自动在上下或者左右生成空白区域。你用的JPEG图片还带有EXIF旋转标记，会导致浏览器识别的图片固有尺寸和你预期的尺寸有偏差，进一步触发了这个适配问题。

解决方法 #

• 如果你不需要保留图片完整内容，只希望左上角对齐无空白，给<image>标签添加preserveAspectRatio="xMinYMin slice"属性即可，该配置会让图片从左上角开始渲染，超出SVG视口的部分直接裁剪：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   width="250"
   height="500">
    <image
      x="0"
      y="0"
      width="250"
      height="500" 
      href="https://assets.codepen.io/1281712/little-nemo-19051126-l.jpeg"
      preserveAspectRatio="xMinYMin slice"
    />
</svg>

• 如果你需要完整显示图片且不接受裁剪，可以将preserveAspectRatio设为none，但该配置会拉伸图片适配SVG尺寸，可能导致画面变形。
• 你也可以提前用图片处理工具移除JPEG的EXIF旋转信息，将图片调整为和SVG尺寸完全匹配的规格，从根源避免适配问题。

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