如何仅用SVG在Safari中实现像素图像清晰缩放

已知Safari不支持image-rendering属性，之前的解决方案依赖外部样式表，想确认是否能在单个SVG文件内部、不依赖外部样式表的情况下，实现低分辨率像素图像缩放后的清晰显示？

我尝试过几种方法，但都失败了：

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <!-- 内嵌CSS在这里似乎有效？ -->
    <svg
      class="svgBG"
      viewBox="0 0 50 50"
      xmlns="http://www.w3.org/2000/svg"
    ></svg>
    

    <svg viewBox="0 0 50 50"
  <defs id="someDefs">
    <style id="style2">
      .svgBG {
        width: 500px;
        height: 500px;
        background-color: #15ff00;
        background-image: url(data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC);
        background-repeat: no-repeat;
        background-size: 100%;
        image-rendering: -webkit-optimize-contrast;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -moz-crisp-edges;
        image-rendering: pixelated;
      }
    </style>
  </defs>
  
   <!-- 无法渲染 -->
 <!-- <rect x="0" y="0" height="1" width="1" class="svgBG" />   -->
 
<!-- 无效 -->
 <svg
 class="svgBG"
 viewBox="0 0 5 5"
 xmlns="http://www.w3.org/2000/svg"
 ></svg>
 
</svg>
</body>
</html>

可以通过纯SVG内置元素实现，不需要外部样式表，以下两种方法都能在Safari中实现清晰的像素缩放：

方法一：使用SVG滤镜实现最近邻缩放 #

在SVG内部定义一个滤镜，通过feScale的mode="nearest"强制像素级缩放，避免模糊：

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义最近邻缩放滤镜 -->
    <filter id="pixelate" x="0" y="0" width="100%" height="100%">
      <feImage 
        href="data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC"
        width="5" height="5" <!-- 原始图像的实际尺寸 -->
        result="source"
      />
      <feTile result="tiled" />
      <feScale 
        in="tiled" 
        scale="100" <!-- 缩放倍数：5*100=500，对应SVG的宽高 -->
        mode="nearest"
        result="scaled"
      />
    </filter>
  </defs>
  
  <!-- 应用滤镜的矩形，覆盖整个SVG区域 -->
  <rect x="0" y="0" width="100%" height="100%" filter="url(#pixelate)" fill="#15ff00" />
</svg>

方法二：使用SVG图案（Pattern）平铺像素 #

将原始小尺寸图像定义为重复图案，用图案填充大矩形，相当于直接放大每个像素块，兼容性更好：

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义图案，尺寸与原始图像一致 -->
    <pattern id="pixelPattern" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
      <image 
        href="data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC"
        width="5" height="5"
      />
    </pattern>
  </defs>
  
  <!-- 先绘制背景色，再用图案覆盖 -->
  <rect x="0" y="0" width="100%" height="100%" fill="#15ff00" />
  <rect x="0" y="0" width="100%" height="100%" fill="url(#pixelPattern)" />
</svg>

说明 #

你之前尝试的SVG背景图方式在Safari中无法生效image-rendering，因为Safari对SVG内部的CSS背景图样式支持有限。而上述两种方法都是纯SVG元素实现，完全不依赖外部样式表，且能绕过image-rendering的兼容性问题，确保像素图像缩放后清晰锐利。

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