3

It is common to see the recommendation to have icons be pixel-snapped to avoid blurriness. However, I've done a test with more or less the same image, one pixel-snapped and one unaligned with the pixel grid and I can't observe any difference in blurriness. I've set my laptop to several different resolutions, but none cause me to see a difference.

Is the pixel-snapping recommendation only for raster images or is there something wrong with my test?

Sorry, SVGs aren't allowed to be uploaded, but here are my test images:

Control Image:

<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4813 1.5L10.8348 1.14645C10.741 1.05268 10.6139 1 10.4813 1V1.5ZM4.48126 1.5V1V1.5ZM2.98126 3H2.48126H2.98126ZM2.98126 15H2.48126H2.98126ZM14.9813 6H15.4813C15.4813 5.86739 15.4286 5.74021 15.3348 5.64645L14.9813 6ZM10.4813 6H9.98126C9.98126 6.27614 10.2051 6.5 10.4813 6.5V6ZM8.1644 8.70975V8.20975C7.88826 8.20975 7.6644 8.4336 7.6644 8.70975H8.1644ZM7.6644 13.1654C7.6644 13.4415 7.88826 13.6654 8.1644 13.6654C8.44054 13.6654 8.6644 13.4415 8.6644 13.1654H7.6644ZM10.4813 1H4.48126V2H10.4813V1ZM4.48126 1C3.95083 1 3.44212 1.21071 3.06705 1.58579L3.77416 2.29289C3.96169 2.10536 4.21605 2 4.48126 2V1ZM3.06705 1.58579C2.69198 1.96086 2.48126 2.46957 2.48126 3L3.48126 3C3.48126 2.73478 3.58662 2.48043 3.77416 2.29289L3.06705 1.58579ZM2.48126 3V15H3.48126V3H2.48126ZM2.48126 15C2.48126 15.5304 2.69198 16.0391 3.06705 16.4142L3.77416 15.7071C3.58662 15.5196 3.48126 15.2652 3.48126 15H2.48126ZM3.06705 16.4142C3.44212 16.7893 3.95083 17 4.48126 17V16C4.21605 16 3.96169 15.8946 3.77416 15.7071L3.06705 16.4142ZM4.48126 17H13.4813V16H4.48126V17ZM13.4813 17C14.0117 17 14.5204 16.7893 14.8955 16.4142L14.1884 15.7071C14.0008 15.8946 13.7465 16 13.4813 16V17ZM14.8955 16.4142C15.2705 16.0391 15.4813 15.5304 15.4813 15H14.4813C14.4813 15.2652 14.3759 15.5196 14.1884 15.7071L14.8955 16.4142ZM15.4813 15V6H14.4813V15H15.4813ZM15.3348 5.64645L10.8348 1.14645L10.1277 1.85355L14.6277 6.35355L15.3348 5.64645ZM9.98126 1.5V6H10.9813V1.5H9.98126ZM10.4813 6.5H14.9813V5.5H10.4813V6.5ZM7.6644 8.70975V11.2837H8.6644V8.70975H7.6644ZM7.6644 11.2837V13.1654H8.6644V11.2837H7.6644ZM8.1644 9.20975H9.6177V8.20975H8.1644V9.20975ZM9.6177 10.7837H8.1644V11.7837H9.6177V10.7837ZM10.4047 9.99672C10.4047 10.4314 10.0523 10.7837 9.6177 10.7837V11.7837C10.6046 11.7837 11.4047 10.9836 11.4047 9.99672H10.4047ZM11.4047 9.99672C11.4047 9.0098 10.6046 8.20975 9.6177 8.20975V9.20975C10.0523 9.20975 10.4047 9.56209 10.4047 9.99672H11.4047Z" fill="#234652"/>
</svg>

Pixel Snapped Image:

<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2L11.3544 1.64728C11.2606 1.553 11.133 1.5 11 1.5L11 2ZM4.48127 2V1.5V2ZM2.98127 3.5L3.48127 3.5V3.5L2.98127 3.5ZM2.98126 14.5L2.48126 14.5V14.5H2.98126ZM14.9813 14.5L14.4813 14.5V14.5H14.9813ZM14.9813 6L15.4813 6C15.4813 5.8678 15.4289 5.74098 15.3357 5.64728L14.9813 6ZM11 6H10.5C10.5 6.27615 10.7239 6.5 11 6.5V6ZM11 1.5L4.48127 1.5L4.48127 2.5L11 2.5L11 1.5ZM4.48127 1.5C3.95084 1.5 3.44213 1.71071 3.06705 2.08579L3.77416 2.79289C3.9617 2.60536 4.21605 2.5 4.48127 2.5V1.5ZM3.06705 2.08579C2.69198 2.46086 2.48127 2.96957 2.48127 3.5L3.48127 3.5C3.48127 3.23478 3.58662 2.98043 3.77416 2.79289L3.06705 2.08579ZM2.48127 3.5L2.48126 14.5L3.48126 14.5L3.48127 3.5L2.48127 3.5ZM2.48126 14.5C2.48126 15.0304 2.69198 15.5391 3.06705 15.9142L3.77416 15.2071C3.58662 15.0196 3.48126 14.7652 3.48126 14.5H2.48126ZM3.06705 15.9142C3.44212 16.2893 3.95083 16.5 4.48126 16.5V15.5C4.21605 15.5 3.96169 15.3946 3.77416 15.2071L3.06705 15.9142ZM4.48126 16.5H13.4813V15.5H4.48126V16.5ZM13.4813 16.5C14.0117 16.5 14.5204 16.2893 14.8955 15.9142L14.1884 15.2071C14.0008 15.3946 13.7465 15.5 13.4813 15.5V16.5ZM14.8955 15.9142C15.2705 15.5391 15.4813 15.0304 15.4813 14.5H14.4813C14.4813 14.7652 14.3759 15.0196 14.1884 15.2071L14.8955 15.9142ZM15.4813 14.5L15.4813 6L14.4813 6L14.4813 14.5L15.4813 14.5ZM15.3357 5.64728L11.3544 1.64728L10.6456 2.35272L14.6269 6.35273L15.3357 5.64728ZM10.5 2V6H11.5V2H10.5ZM11 6.5H14.9813V5.5H11V6.5Z" fill="#234652"/>
<path d="M8 9V8.5C7.72386 8.5 7.5 8.72386 7.5 9L8 9ZM8 12L7.5 12L8 12ZM7.5 13.4556C7.5 13.7318 7.72386 13.9556 8 13.9556C8.27614 13.9556 8.5 13.7318 8.5 13.4556L7.5 13.4556ZM7.5 9L7.5 12L8.5 12L8.5 9L7.5 9ZM7.5 12L7.5 13.4556L8.5 13.4556L8.5 12L7.5 12ZM8 9.5H9.4533V8.5H8V9.5ZM9.4533 11.5H8V12.5H9.4533V11.5ZM10.5 10.5C10.5 11.1454 9.9735 11.5 9.4533 11.5V12.5C10.3546 12.5 11.5 11.8546 11.5 10.5L10.5 10.5ZM11.5 10.5C11.5 9.14543 10.3546 8.5 9.4533 8.5V9.5C9.9735 9.5 10.5 9.85457 10.5 10.5L11.5 10.5Z" fill="#234652"/>
</svg>

2 Answers 2

4

In windows, you have a magnifying glass tool. I'm not sure of the name in English.

enter image description here

It allows you to see a zoomed-in image but at a sub-pixel level. You can see that on texts.

enter image description here

Here is a screen capture of your icons.

enter image description here

You can see that they render a bit differently.

In theory, what pixel shaping does is to make the lines render like the ones marked with A, instead of making them render like the vertical lines B.

But today screens are so dense, that In my humble opinion, in general, it is not worth it bother.

But sometimes in very specific cases, it can be distracting. Adobe PDF reader was historically very bad at rendering vertical lines like lowercase L. It is better now, but if your text looks like the M in this example.

enter image description here

You might try to tweak it.

In the case of text is easier to spot these changes because we have weight references just near each other. But in the case of icons, I doubt there is noticeable differences.

1
  • 1
    Thank you for the thoughtful answer. It's interesting to me that the non-snapped version was the one that had 3 sharp lines in your images. "Magnifier" is what it's called in English. That's a great tip. I zoomed in on my images using the tool and found them both equally blurry in slightly different ways. I noticed when moving the icons around a tenth of CSS pixel at a time that the pixel-snapped svg stayed consistent while the non-snapped version jittered around. Mar 23, 2023 at 1:08
1

No, pixel snapping is not strictly neccesery. In fact pixel snapping is slightly inoptimal, you should technically snap to a grid that is 2 times the frequency of your pixel grid for best possible results.

But snapping to a pixel grid can help you make your horizontal vertical, horizontal a few other line directions crisper. However, any grid multiple of pixels should do the same thing! So seems that recommendation to use a pixel grid is not necceserily true as long as you use a grid that has some sane multiple of pixels, as it may be easier to work with for consistency.

Also remember that the entire purpose of you using illustrator is that the icon may be scaled, so the pixel grid may not in fact ultimately be the pixel grid your icons are displayed as. If not why bother with vectors over tweaking individual pixels.

But please note that the way you construct your icon may alter whether you prefer to use pixel centers or pixel corners as your grid basis. As the problem with pixel snapping is that it can just as easily smear all your srokes across two pixels as it can make filled boxes crisp. So using pixel snapping does not necceserily do anything for you unless you know what you are doing. For this reason applying pixel snapping at the last stage of design is useless unless your ready to fix all errors that caused.

10
  • Could you elaborate on "you should technically snap to a grid that is 2 times the frequency of your pixel grid..."? I doubled the size of the SVG and stroke and then shrank it down to the same size as the control and I see even less difference now. codepen.io/CognitoForms/pen/xxaQJqW?editors=1010 Mar 23, 2023 at 11:52
  • @tylertrotter Doubling does not do anything. You cant just take a vector image and say snap to pixels. It wont do anything meaningfull to the result exept by chance. What you need to do is snap to a grid whie your doing the original drawing, because the computer can not solve for your intention. Why 2 times? Well because you may want to snap in the middle of a pixel and on the edge of the pixel. See if you have a straight line that is one pixel wide and it is at the edge of pixel it will smear across two pixels creating a semitransparent 2 pixel line. if on the otherhand you draw a closed...
    – joojaa
    Mar 23, 2023 at 15:10
  • ... box and you snap to the middle of a pixel then the box edge will blur out because its halfway into another pixel (Though its a bit simplistic as not everything is box filtered). Also you can need to snap on edge in one direction and on center in another in certain cases. All of this is in line with Nyquist frequency . Now the benefit of doing this is small and may not be worth it but it is there
    – joojaa
    Mar 23, 2023 at 15:17
  • Logical addendum. If you could take a random vector, just let computer to snap to pixels and get better results then the rendering engines would do this automatically. But that in itself is not the thing that helps but rather the fact that the icon designer accounted for the discrete nature of the output while designing and taking advantage of the ability to controll the signal in special cases.
    – joojaa
    Mar 23, 2023 at 15:26
  • Would you mind explaining how a single vertical line in an SVG could be as sharp as possible? I understand that there is a lot of complexity in this area, but I think if I could see how one line is best drawn, I might grasp something I'm missing. Mar 23, 2023 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.