How do I get my vector logos to look super sharp on the web?

I do a lot of work with Illustrator, but I’ve never been super happy with how my work looks on our website. I’ve tried various techniques – saving from Illustrator, and opening in Photoshop and saving – but I’m still missing something.

Ed. The logo was only ever supplied as AI. I get the same slightly fuzzy result whether I’m saving for web & devices from Illustrator, or taking the vector into Photoshop. I tend to scale in Illustrator to the required size, and then save for web (inc type optimised – there’s text in the logo).


When rasterizing vector graphics, lines look sharp if they fall into pixel boundaries. This can be done by the rasterizer (rounding), but most vector graphic programs I know don’t support that. One strategy to counter that will be to use a grid whose cells span and integer number of pixels (one cell 1×1 or 2×2 or 3×3, … pixel).

For icons, a 16×16 grid is a good start, as it allows sharp icons of 16×16, 32×32, 48×84 etc. to be produced from the same vector graphic.

For a logo, a pixel grid with 1 cell = 1 pixel in the smallest representation of the logo is a good start.

Here’s a tutorial that explains this technique: Vector Light Bulb Icon in Inkscape

Source : Link , Question Author : Possikiem , Answer Author : Peter Walser

Leave a Comment