Aug 23, 2013

Inkscape and glue: Creating CSS sprites

I use a combination of Inkscape (to create raw SVG files and then export them to PNG images) and glue (to stich them all up and create the CSS file) to help me create CSS sprite icons for various websites. I also used iconmonstr as a starting point for some icons.

This is the BASH script I use to convert raw SVG files into PNG files and then into the sprite and CSS combination:
#!/bin/bash
mkdir -p ./img/48x48/ ./img/32x32/ ./img/16x16/
for i in ./svg/*.svg; do
    inkscape -z -w 48 -h 48 -e ./img/48x48/`basename $i .svg`.png $i
    inkscape -z -w 32 -h 32 -e ./img/32x32/`basename $i .svg`.png $i
    inkscape -z -w 16 -h 16 -e ./img/16x16/`basename $i .svg`.png $i
done
glue ./img/ --img=./img/ --css=./css/ --html --project

1 comment:

  1. Thanks to Admin for Sharing such useful Information. I really like your Blog. Addition to your Story here I am Contributing 1 more Similar Story CSS Sprite images Example to reduce HTTP Requests.

    ReplyDelete

Thanks for contributing!! Try to keep on topic and please avoid flame wars!!