I have more than 250px high resolution flat icons. In the site we use those icons as width of 20px according to design template.

I created sprite to reduce request. All icons looks blurry when I resize with 20px.

If I create 50px icons sprite then how could I manage height width of 20px in template of 50px icons?

Or what should I do to resize flat icons without blurry when to reduce size of 20px?

I used photoshop cs 6 and all icons are made in adobe illustrator. I have icons AI file to process.

  • 1
    Browser-dependant resizing is not always good. On another note, why not just export from Illustrator? How do you resize in the browser? Why not export them in the size you need (20px, correct?)? – Luciano Aug 16 '16 at 12:58
  • @Luciano: Can you explain me in deep because I am not getting you completely. – Dipak chavda Aug 16 '16 at 14:27
  • Your question is not very clear, so I was asking for more information. Why do you need Photoshop when you can export directly from Illustrator? Also why are you exporting your icons at 50px if you are going to resize them to 20px (at least that's what I understood from your question). – Luciano Aug 16 '16 at 16:05
  • @Luciano : When I tried to resize at 20px then it looks blurry. and that is why I tried to use 50px icons. – Dipak chavda Aug 17 '16 at 5:33

"Sprite"...that's a term I haven't heard in a while. If these icons were made inside Illustrator and are full vector images, then you should save and use them as Scalable Vector Graphics (SVG) instead.

This post from CSS Tricks does a pretty good job of describing how and why to use SVGs instead of raster images.

To outline what he says in the article:

  • Save your file as an SVG inside Illustrator
  • While saving, click on the SVG Code button enter image description here
  • (Optional) copy the code that AI gives you and paste it into this optimizing tool and then download your optimized (smaller file) SVG
  • Paste the code from your SVG inline into the HTML. If you are using php, you can use the <?php echo file_get_contents("[your_image].svg"); ?> command to keep your code cleaner

In addition to fewer HTTP requests, the benefit of inserting the code instead of the image is that you can control the appearance of your SVG via CSS.

Your SVG code will contain <g> and <path> tags that you can attach classes or IDs to.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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