Hi all,

 

I've created a search icon in Illustrator (exporting it as a PNG) and although it looks fine in Firefox, Safari and Chrome it appears blurry and out of focus in Internet Explorer.

Why might this be?

 

Is there a way of creating a search icon with making it an image?

 

Thanks!

Edited January 31, 201511 yr by Demonolith

What screen are you viewing it on? Icons should really be in SVG, with a png fallback if you are supporting <IE9. SVG will render and scale infinitely better than a raster graphic.

Edited January 31, 201511 yr by rbrtsmith

could be the transparency... got a link to the exported png?

 

of course otherwise then svg would be the way to go anyway as Robert says

Edited January 31, 201511 yr by davep

Here's a page with the search icon (far-right of the menu bar).

 

I've never used SVG before - should I be saving photos for the web using that extension?

 

I normally use Photoshop instead of Illustrator and the JPG or PNG extension.

Edited January 31, 201511 yr by Demonolith

You can save as svg in illustrator. You could write a whole book on SVG, they are different to raster images in many ways. Here is a good guide to SVG http://css-tricks.com/using-svg/

Edited January 31, 201511 yr by rbrtsmith

looks exactly the same for me in firefox and IE11 - could be an older version of ie maybe?? strange. to be honest i wouldn't worry about it much, and just use an svg. if it is down to an older IE (though can't think why other than the alpha transparency implementation) then those users are probably used to a lot worse (using older IE i mean)

When I save the vector as SVG I can't insert it into my page (it appears as an extension that opens in Internet Explorer).

 

I'm using IE11, strange...

Edited January 31, 201511 yr by Demonolith

Have you followed the tutorial I linked to? It goes over a number of methods for putting SVG's into a webpage.

Ah, silly me - it appeared as broken in Design View of Dreamweaver and I didn't bother to check it in Live View or upload it.

 

Thanks for the help!

Tip don't use Dreamweaver, especially the design view, use a browser to view your work