Advertisement


White border around transparent PNG after Illustrator export?


Question

I created a logo in Illustrator CC and after I 'Save for Web' using PNG-24 with a transparent background and put it in my website html there is a thin white stroke around the logo. This is definitely not a html problem but an issue with exporting with illustrator.

I definitely have not got a white border on the image in illustrator. It does not show up when I preview the image in Windows but does in my HTML. Im not using any CSS either.

2016/03/09
1
2
3/9/2016 5:44:00 PM

My bet is that your artboard isn't aligned to the Illustrator pixel grid. Try going to the artboard tool:

Artboard Tool

Then in your toolbar, verify that your artboard's X, Y, Height, and Width are all whole pixel numbers (no decimals!).

Artboard Properties

Be sure to select a corner point and not the center. We want each edge of your artboard to land perfectly on the pixel grid.

If they were already whole pixel numbers, this probably won't make any difference, but if they were, change them to whole pixels, then double check that your artwork still fits ok, and then try Save for Web again.

2014/11/17
3
11/17/2014 11:56:00 PM