Optimize SVG images for retina displays

Sep 1, 2012 | 2 min read | macOS, Python

As high DPI screens are becoming more and more common, it is necessary to improve the images around the web to look great on these new screens and not just the low DPI screens of the past. Guides like this can be used when dealing with ordinary raster images.

Another solution is to create vector graphics, for example in the SVG format. Vector images can look equally great in any resolution and at any DPI. The caveat is that the image depicted must be usable even when rendered using few pixels on low DPI displays. Thus the format is best used for icons and images without a lot of stuff going on. In the example to the right you see that the upper text on the bottle is unreadable when zoomed out.

After you have created your SVG image, you should make sure that it has the smallest file size possible. Just as we have done with raster images since forever by using tools like ImageOptim and its like.

To minimize the SVG's file size, I use the python script Scour - an SVG scrubber.

Scour is an open-source Python script that aggressively cleans SVG files, removing a lot of 'cruft' that certain tools or authors embed into their documents

This will decrease the file size with as much as 50%. Since I use the script on all of my SVG images before uploading them to my website, I've created an OS X service to run Scour from the Finder.

for f in "$@"
do
    if [ ${f: -4} == ".svg" -o ${f: -4} == ".SVG" ]
    then			
    python /Applications/Utilities/scour/scour.py --enable-comment-stripping --create-groups --enable-id-stripping --shorten-ids --set-precision=5 --quiet --indent=none -i "$f" -o "$f 2"       
    mv "$f 2" "$f"
    fi
done

The service contains a shell script that checks if the image file selected really is an SVG image and runs the Scour with a couple of optional parameters. Then it replaces the original image with the optimized version. If you want to keep the original image, this step can be deleted.

To use the service as is, Download the OS X service and Scour. The Scour script should be copied to /Applications/Utilities/scour/, before opening the service to install it. After the service is installed, you can right click on any SVG image in the Finder and choose Optimize SVG.