: Create Sprite of high resolution image 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

@Cofer715

"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

(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.

Vote Up Vote Down