jQuery Chosen With SVG Icons Base64 Encoded Inside The CSS File

“Chosen is a library for making long, unwieldy select boxes more user friendly.”

No doubt, it’s the best.
What I notice though is the use of two png files for regular and retina displays.
And suddenly I thought “SVG!”.

And why not, embedded in the CSS.

 

Here’s what you get.

 

From:

Screenshot 2014-06-24 12.00.55

To:
Screenshot 2014-06-24 12.01.06

 

 

 

 

So, I went to work and converted the small icons into separate svg files.
You can do that in AI, in Fireworks with added SVG extension or in Inkscape.

Once you get each SVG, you need an online Base64 encoder.

Check out the SVG Chosen demo here. Enjoy!