SVG中放大的低分辨率像素图像元素在Safari显示模糊，Firefox与Chrome显示正常的问题求助

I’ve run into this exact issue before—Safari has some quirky handling of image-rendering for pixel art inside SVGs, especially when nested elements are involved. Let’s break down why your current setup isn’t working and how to fix it.

Why Your Current Code Fails #

Safari’s support for image-rendering: pixelated is inconsistent when applied to nested SVG elements or <use> references. The multiple layers of SVG nesting in your code can prevent the browser from properly applying the rendering rules to the underlying pixel image. Also, the preserveAspectRatio: slice setting might be triggering unintended interpolation during scaling.

Solution 1: Simplify SVG Structure & Target Styles Precisely #

Let’s strip out unnecessary nesting and apply the rendering styles directly to the <image> element, plus add Safari-specific hacks to force crisp rendering:

<svg viewBox="0 0 50 50" width="500" xmlns="http://www.w3.org/2000/svg" style="background: #1A1A1A; -webkit-transform: translate3d(0,0,0); will-change: transform;">
  <defs>
    <style>
      #skeleton {
        /* Prioritize pixelated for modern browsers */
        image-rendering: pixelated;
        /* Fallback for older Safari versions */
        image-rendering: -webkit-optimize-contrast;
        /* IE/Edge fallback */
        -ms-interpolation-mode: nearest-neighbor;
      }
    </style>
    <!-- Directly define the image without nested SVG -->
    <image id="skeleton" preserveAspectRatio="none" width="50" height="50" href="data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC"></image>
  </defs>
  <!-- Use the image directly without extra SVG wrapping -->
  <use href="#skeleton" x="0" y="0" width="50" height="50" />
</svg>

Key changes made:

• Removed nested SVGs: Simplifying the structure eliminates layers that Safari might struggle to apply styles to.
• Targeted <image> directly: Applying image-rendering to the actual image element (not parent SVGs) ensures Safari picks up the rule.
• Added hardware acceleration triggers: -webkit-transform: translate3d(0,0,0) and will-change: transform force Safari to use GPU rendering, which often fixes crispness issues.
• Set preserveAspectRatio="none": This ensures the pixel image scales exactly to the specified dimensions without interpolation.

Solution 2: Convert Pixel Art to SVG Shapes (For Maximum Compatibility) #

If you need support for very old Safari versions, converting your PNG pixel art to SVG <rect> elements guarantees crisp rendering at any scale. For small 50x50 art, tools can automatically generate a grid of colored rectangles. This approach removes the need for <image> elements entirely, eliminating rendering inconsistencies across browsers.

Testing Tips #

• Verify on multiple Safari versions: image-rendering: pixelated is supported in Safari 15.4+, so older versions will rely on -webkit-optimize-contrast.
• Clear browser cache: Sometimes Safari caches old renderings, so a hard refresh (Cmd+Shift+R) can help test changes properly.

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