Programmer. Software Architect. Technical Manager.

Optimize SVG images for retina displays

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.

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.