Edges of SVG appearing blurry when viewed in mobile

Question

I am using a SVG instead of an actual emoji in my website to make sure that it looks the same on all devices. However, the edges of the SVG are appearing blurry and pixelated when I view it on my iPhone. (does not happen on desktop.)

As you can see from the first image (✌️emoji svg), some parts of the SVG are blurry while others are crisp. In the second svg, (💭emoji) the edges are completely blurry. It is not the svg that is causing the blurriness, it appears completely crisp on desktop. This is how I am inserting the svg:

 .emoji {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:1em 1em;
    display:inline-block;
    height:1em;
    margin:0 .05em 0 .1em;
    vertical-align:-0.1em;
    width:1em
}
.emoji.victory-hand {
    background-image: url(../emojis/emoji/victory_hand_color_default.svg);
}
.emoji.thought-balloon {
    background-image: url(../emojis/emoji/thought_balloon_color.svg);
}

<h2>hello<i class="emoji victory-hand"></i></h2>
<h2>projects <i class="emoji thought-balloon"></i></h2>

The svg is fine when I use an svg viewer to view it or use a computer, it only appears blurry on mobile. Does anyone know why this is happening?

Answer 1

As commented, iOS safari apparently renders masked images at a fixed resolution.
So the image gets blurry when zooming in.

That's probably the reason, why some contours in the OP's emoji are crisp while others are blurry/pixelated.

Left: masked shape; right: clipped shape

body {
  font-size: 5em;
  background: #000;
}

svg {
  height: 100%
}

.icon-wrap {
  height: 1em;
  display: inline-block;
}

<div class="icon-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
      <mask id="mask">
        <rect x="0" y="0" width="100%" height="100%" fill="#000"></rect>
        <path fill="#fff" d="M62.05 7.31c6.86 0 14.13 6.46 14.41 12.79c0.21 4.74-1.42 10.5-3 16.07c-1.98 6.98-3.68 13.01-2.02 17.42a3 3 0 0 0 2.81 1.94h0.11l7.2-0.25h0.06c7.33 0 13.3 5.96 13.31 13.3l0.05 42.21c0 2.5-0.97 4.86-2.74 6.63s-4.12 2.75-6.63 2.75h-0.08c-8.6-0.07-21.51-0.41-34.19-1.6c-8.6-0.81-17.48-2.09-24.11-5.85c-2.2-1.25-4.58-1.54-6.49-1.78c-0.76-0.09-1.47-0.18-2.03-0.32c-4.2-0.99-7.14-4.61-7.15-8.8l-0.08-32.75c-0.01-3.78 2.69-6.95 6.42-7.53c0.15-0.02 0.31-0.06 0.45-0.11c0.56-0.18 13.94-4.55 24.05-12.45c4.87-3.81 9.05-9.67 11.17-15.68s2.1-12.36 2.09-17.5c0-2.44-0.01-5.74 0.41-6.74a10.97 10.97 0 0 1 5.98-1.75"></path>
      </mask>
    </defs>
    <radialGradient id="a" cx="51.77" cy="31.401" r="87.039" gradientTransform="matrix(-.00218 1 -.7873 -.00172 76.604 -20.315)" gradientUnits="userSpaceOnUse">
      <stop offset=".6" stop-color="#FFCA28" />
      <stop offset="1" stop-color="#FFB300" />
    </radialGradient>
    <path mask="url(#mask)" fill="url(#a)" d="M85.52 121.67c-8.63-.07-21.58-.41-34.32-1.61-8.77-.83-17.83-2.14-24.71-6.04-1.94-1.1-4.06-1.37-5.94-1.6-.8-.1-1.55-.19-2.19-.34-4.88-1.15-8.29-5.37-8.31-10.26l-.07-32.75c-.01-4.53 3.22-8.32 7.69-9.02.08-.01.15-.03.23-.05.55-.18 13.69-4.46 23.59-12.2 4.66-3.64 8.65-9.25 10.68-15 2.02-5.73 2.01-11.98 2-17 0-3.24-.01-7.27.87-7.86 2.14-1.41 4.5-2.13 7.01-2.13 7.72 0 15.6 7.05 15.91 14.23.22 4.98-1.45 10.86-3.06 16.54-1.9 6.73-3.55 12.54-2.06 16.49.22.59.78.97 1.4.97l7.29-.25h.07c8.16 0 14.8 6.64 14.81 14.79l.05 42.21c0 2.91-1.12 5.64-3.18 7.69a10.81 10.81 0 01-7.69 3.19h-.07z" />
  </svg>
</div>

<div class="icon-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
      <clipPath id="clip">
        <rect x="0" y="0" width="100%" height="100%" fill="#000"></rect>
        <path fill="#fff" d="M62.05 7.31c6.86 0 14.13 6.46 14.41 12.79c0.21 4.74-1.42 10.5-3 16.07c-1.98 6.98-3.68 13.01-2.02 17.42a3 3 0 0 0 2.81 1.94h0.11l7.2-0.25h0.06c7.33 0 13.3 5.96 13.31 13.3l0.05 42.21c0 2.5-0.97 4.86-2.74 6.63s-4.12 2.75-6.63 2.75h-0.08c-8.6-0.07-21.51-0.41-34.19-1.6c-8.6-0.81-17.48-2.09-24.11-5.85c-2.2-1.25-4.58-1.54-6.49-1.78c-0.76-0.09-1.47-0.18-2.03-0.32c-4.2-0.99-7.14-4.61-7.15-8.8l-0.08-32.75c-0.01-3.78 2.69-6.95 6.42-7.53c0.15-0.02 0.31-0.06 0.45-0.11c0.56-0.18 13.94-4.55 24.05-12.45c4.87-3.81 9.05-9.67 11.17-15.68s2.1-12.36 2.09-17.5c0-2.44-0.01-5.74 0.41-6.74a10.97 10.97 0 0 1 5.98-1.75"></path>
      </clipPath>
    </defs>
    <radialGradient id="a" cx="51.77" cy="31.401" r="87.039" gradientTransform="matrix(-.00218 1 -.7873 -.00172 76.604 -20.315)" gradientUnits="userSpaceOnUse">
      <stop offset=".6" stop-color="#FFCA28" />
      <stop offset="1" stop-color="#FFB300" />
    </radialGradient>
    <path clip-path="url(#clip)" fill="url(#a)" d="M85.52 121.67c-8.63-.07-21.58-.41-34.32-1.61-8.77-.83-17.83-2.14-24.71-6.04-1.94-1.1-4.06-1.37-5.94-1.6-.8-.1-1.55-.19-2.19-.34-4.88-1.15-8.29-5.37-8.31-10.26l-.07-32.75c-.01-4.53 3.22-8.32 7.69-9.02.08-.01.15-.03.23-.05.55-.18 13.69-4.46 23.59-12.2 4.66-3.64 8.65-9.25 10.68-15 2.02-5.73 2.01-11.98 2-17 0-3.24-.01-7.27.87-7.86 2.14-1.41 4.5-2.13 7.01-2.13 7.72 0 15.6 7.05 15.91 14.23.22 4.98-1.45 10.86-3.06 16.54-1.9 6.73-3.55 12.54-2.06 16.49.22.59.78.97 1.4.97l7.29-.25h.07c8.16 0 14.8 6.64 14.81 14.79l.05 42.21c0 2.91-1.12 5.64-3.18 7.69a10.81 10.81 0 01-7.69 3.19h-.07z" />
  </svg>
</div>

Workarounds:

• replace <mask> with <clipPath>
• use compound paths for cutout shapes like holes (e.g. in the letter O)
• try another emoji library with a more simplistic/cleaner svg structure

Answer 2

Safari has this really big issue where svgs are not rendered properly for its device's retina display.

Try adding:

-webkit-transform: translate3d(0,0,0)

To the svg.

If not, it might not be fixable as any svgs in Safari do not work well with outlines.

Also try adding:

shape-rendering="geometricPrecision"

To the svg.

Instead if that does not work either try:

shape-rendering = "crispEdges"

Instead of geometricPrecision, that disables anti-aliasing on the image through the browser.