How to avoid export pixelation with vector graphics?

Whenever I export a vector to an image, and the image is not a multiple of the original vector canvas size, it is pixelated and over-anti-aliased in certain areas of the image.

An example: I started out drawing the Brackets icon as a vector on a 30×30 px canvas, and exported to 128px. You will notice that the 120px version is much sharper than the 128px version, because 120px is a multiple of 30 (the start dimension).

Why does this happen, and how can I avoid it?

Answer

The issue is pretty much as you state in the question. A pixel-sharp image requires that your drawing aligns with the pixel grid. If your original was 30×30, any multiple of that will produce a pixel-sharp image as 1px will be converted to exactly 2px, or 3px, or 4, etc.

128, however, is 4.26 times as large as 30. So 1 px in your original is now 4 and one quarter pixels. Since there aren’t 1/4 pixels, that will fall on a whole pixel and have to be anti-aliased.

It actually looks fine given all of that. It’s really blurred–just default anti-aliasing. But if you don’t feel it’s sharp enough, the only real fix is to design it at a multiple of 128 rather than 30.

Attribution
Source : Link , Question Author : Elegant , Answer Author : DA01

Leave a Comment