I am designing this logo for my website. It looks great in Illustrator CC but looks pixilated on the site. I want to smooth out the "A" and "W" diagonal vector lines. I have tried exporting as a PNG Interlaced and using the "Align to the Pixel Grid" option. The image is partially vector lines and partially type. Any tips or suggestions? Thanks in advance.

lines and type logo

  • Save the image as an SVG. That way it will still be a vector even on the web. Though some old browsers don't have much support for SVG web graphics. Feb 10 '16 at 17:54

Convert the type part of the logo to vector shapes. Then export as SVG and use the SVG in your Web page. The logo will always be rendered at the right size for the context and won’t have any pixelated lines.

You can see here that SVG is supported in 97% of Web browsers that are in use today:

Can I use SVG?

But if you want to support the other 3% oldest browsers then Google “SVG with PNG fallback” and choose a technique that is best suited to your tools and needs.

  • Thanks Simon! It looks a lot better as SVG, now I just have to figure out how to get my Wordpress theme to play nice with the format :-p
    – Ali W
    Feb 11 '16 at 21:17
  1. Click Save as Web ⌥+⇧+⌘+S or File>Save as Web
  2. Select PNG-24, tick interlaced
  3. Save

About SVG, it is a great option these days for having a vectorised logo on your website but from my experience its a heavy format for the website and if you have many icons in SVG saved your website will run a bit slower.

Good luck

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