Skip to main content
gardenia0820
gardenia0820
Participant
October 27, 2018
Answered

How to save vector icon for web use?

  • October 27, 2018
  • 5 replies
  • 5758 views

Beginner here, I have been working on vector icons for a website and I've tried a few tutorials online to try to sharpen the image for web use.  Every image I create and save on both Illustrator and Photoshop turn out blurry when exported to .PNG. I have snap to grid, pixel and point checked, I have tried to create pathways in photoshop and opening in illustrator, I save all images in 72 dpi. When I save, I choose "Save for Web" and save in 24-PNG. What am I doing wrong? Can someone help me out?

This topic has been closed for replies.
Correct answer Dan Rodney

You should be using SVG for vector web graphics.

Use the newer File > Export > Export As instead of the older File > Save As.

Tips for Creating SVG with Adobe Illustrator

5 replies

T
Test Screen Name
Legend
October 28, 2018

The “blurry” appearance may be just designing big and viewing small. Zoom in AI until the size is the same. (Never zoom in on the web graphic to check it’s ok!!!) Does it look better or just the same? Often people expect a lot of sharp detail and clear diagonal lines in tiny work But the screen can’t do it.

Dan Rodney
Community Expert
Dan RodneyCommunity ExpertCorrect answer
Community Expert
October 28, 2018

You should be using SVG for vector web graphics.

Use the newer File > Export > Export As instead of the older File > Save As.

Tips for Creating SVG with Adobe Illustrator

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
gardenia0820
gardenia0820Author
Participant
October 29, 2018

Wow, didn't realize it was that simple! Thank you!!

ceyhun_akgun
ceyhun_akgun
Legend
October 27, 2018

Web images are low resolution.

The vector does not have sharp lines.

Use the pixel alignment option.

Seamlessly align your artwork with the pixel grid...

Best practices for creating web graphics in Illustrator

Graphic Designer Educator / PrePress Consultant
barbara_a7746676
Community Expert
barbara_a7746676Community Expert
Community Expert
October 27, 2018

Because PNG is raster it will look blurred or pixelated. You could try PNG8 with No Dither. That will reduce blurriness, but will increase pixelization.

If your company or client will accept SVG file format, that will give you the nice smooth edges you are looking for. Choose File Save As and for Save As Type choose SVG. Once saved, you can view the SVG by opening it in Illustrator. It can also be previewed in a web browser by dragging the SVG file into your browser or by using the Open command in the browser.

    J
    jdanek
    Inspiring
    October 27, 2018

    Try 144ppi Resolution instead of 72.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices