solvit.io

Avoid displaying blurry SVG icons

SVG images smaller than a certain size (around 20 pixel) are displayed blurry by most browsers.

Solution #1
  1. When creating the icons, enable the "Align New Objects to Pixel Grid" option in your design application.
  2. When displaying the icons, make sure that SVG images are displayed exactly at their original size (without scaling their height or width).

A good example is the Octicons icon set by GitHub. All the icons are aligned to the grid and they are displayed pixel perfect either at 16 pixel or at large sizes. Any other size will show blurry icons.

Solution #2

In some rare cases, you can improve the SVG rendering quality using the shape-rendering property.

Use the value crispEdges to turn off anti-aliasing and to adjust line positions and line widths to align edges with device pixels:

<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"
     viewBox="0 0 12 16" width="12" height="16">
    ...
</svg>

Use the value geometricPrecision to increase the precision used to render the lines and curves of the image:

<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision"
     viewBox="0 0 12 16" width="12" height="16">
    ...
</svg>
Find more solutions about: , , , ,