SVG内嵌套SVG图像在Firefox与Chrome显示效果不一致如何解决？

这个跨浏览器显示差异不属于浏览器Bug，是SVG资源默认缩放规则的实现差异导致的：

• PNG、JPG等位图资源被<image>标签引用时，默认会直接拉伸适配<image>指定的容器尺寸
• SVG作为矢量资源自带缩放规则，默认会保留自身宽高比进行对齐，Chrome和Firefox对未显式指定缩放规则的SVG默认对齐逻辑不一致，因此出现显示偏差

可以选择以下任意一种方案实现两款浏览器效果完全一致：

方案1：修改被嵌入的SVG文件 #

给foo.svg的根<svg>标签添加preserveAspectRatio="none"属性，强制SVG忽略自身宽高比，完全拉伸填满父容器：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="300" viewBox="0 0 500 300" preserveAspectRatio="none">
  <path stroke-width="1" stroke="blue" fill="none" d="M 0,0 L 0,300 L 500,0 L 500,300 Z" />
</svg>

方案2：修改外层SVG的<image>标签 #

如果不方便修改被嵌入的SVG源文件，给外层的<image>标签添加preserveAspectRatio="none"属性，强制所有被引用的资源（包括SVG、PNG、JPG）都拉伸填满指定尺寸：

<image x="0.1" y="0.1" width="15.8" height="8.8" href="foo.svg" preserveAspectRatio="none"></image>

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