Three small tips for shrinking SVG images
images linux NaBloPoMo SuperTinyIcons svg tips · 8 comments · 300 words · read ~799 times.
I work on the SuperTinyIcons project. Our aim is to make pixel perfect SVG icons in under 1KB. Because SVG can be quite verbose, every single redundant byte we can eliminate is a byte we can use in drawing.
Here are three quick tips for shaving a few bytes off an SVG.
Decimal Magic
SVG co-ordinates can have decimal precision, like: 123.456. But what about co-ordinates which are less than one? 0.123 can be rewritten as .123 - we can drop the 0!
These two sed commands will turn 0. to . and -0. to -.
BASH
sed -i -z "s/ 0\./ \./g" *.svg
sed -i -z "s/\-0\./\-\./g" *.svg
What's my (new) line?
For boring technical reasons to do with teletype printers, Windows machines use two characters to represent a newline. CR the Carriage Return send the print-head back to the start of the line, then LF is the Line Feed to move the paper by one line.
Unix just uses LF. Because no-one uses teletypes.
The brilliant dos2unix program will convert all Windows-style newlines to Unix style. Magic!
Last Line
Most text editors add a newline to the end of any file you create. Why? Who knows.
Remove any trailing newlines from the file with:
sed -i -z s/\\n$// *.svg
Using the above three commands, I've been able to shave off dozens of bytes from these files. A worthy endeavour, I'm sure you'll agree!
If you want to make images as small as humanly possible, come join us.
Chris Midgley says: