title: Scaled up low resolution pixel image element in SVG blurry on Safari, but not in Firefox and Chrome
body: <p>This is what it looks like in Chrome and Firefox:
  <a href="https://i.stack.imgur.com/yu5WS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yu5WS.png" alt="Rendered in Firefox and Chrome" /></a></p>
  <p>This is what it looks like in Safari:
  <a href="https://i.stack.imgur.com/1mPQL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1mPQL.png" alt="enter image description here" /></a></p>
  <p>I have tried the commonly suggested</p>
  <pre class="lang-css prettyprint-override"><code>image {
        image-rendering: optimizeSpeed;     
        image-rendering: -moz-crisp-edges;          
        image-rendering: -o-crisp-edges;       
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated; 
        image-rendering: optimize-contrast;      
        -ms-interpolation-mode: nearest-neighbor;  
  }
  </code></pre>
  <p>This is my SVG code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;svg viewBox=&quot;0 0 50 50&quot; width=&quot;500&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; &gt;
    &lt;defs&gt;
    &lt;style&gt;
      image, svg, use, #character { 
        image-rendering: optimizeSpeed;     
        image-rendering: -moz-crisp-edges;          
        image-rendering: -o-crisp-edges;       
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated; 
        image-rendering: optimize-contrast;      
        -ms-interpolation-mode: nearest-neighbor;  
      } 
      svg { background : #1A1A1A; 
      -webkit-transform: translate3d(0,0,0)}
    &lt;/style&gt;
      &lt;svg width=&quot;50&quot; height=&quot;50&quot; viewBox=&quot;100 0 50 50&quot;&gt;
        &lt;image id=&quot;skeleton&quot; preserveAspectRatio=&quot;xMinYMin slice&quot; href=&quot;data:image/png;charset:utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAZklEQVR4nO3XQQ6AIAwEQPD/f64nE/WoLFEy84CWppSG1gAASOnJ4FVVl2S9x/JtqcBLOTpy70xCvCMzi4mZefhlhh1CXt/Zp3PwufkZ8TKNiGGzA0DaeWOn/ybLbPZlCgEAAH5nBzIvM+pVaumQAAAAAElFTkSuQmCC&quot;&gt;&lt;/image&gt;
      &lt;/svg&gt;
    &lt;/defs&gt;
  
    &lt;svg id=&quot;character&quot;&gt;
      &lt;svg width=&quot;50&quot; height=&quot;50&quot; viewBox=&quot;0 0 50 50&quot;&gt;
        &lt;use href=&quot;#skeleton&quot;&gt;&lt;/use&gt;
      &lt;/svg&gt;
    &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>