A Makefile Rule for Generating Responsive Images from SVG

This rule takes an SVG file as input and returns two PNGs. One is rendered with 72 dpi, which maps 1 SVG pixel to one output pixel. The other, target@2.png, is rendered with twice the solution to fit for Retina displays.

target.png: %.png : %.svg
	convert +antialias -background none "$<" "$@"
	convert +antialias -background none -density 144 "$<" \
	        "$(patsubst %.png,%@2.png,$@)"
	optipng -o7 "$@" "$(patsubst %.png,%@2.png,$@)"

target@2.png: target.png

The last line is optional. It tells make how to build the @2 file directly in case some other rule asks for it. You will need ImageMagick and optipng installed for this rule to work.

So, why on earth would someone want to do this? SVG is already a scalable format, so serving it directly would be the best decision surely? Well, usually yes. But in some cases the SVG file is just too large (even after gzipping) to be sent directly. In this case the above Makefile rule jumps in and generates nice, small PNGs.