Responsive svg sprites

The sprites are embedded as reference using the <use/> tag. The single components within the external sprite image are accessed via an IRI reference.

Since IE 9-11 and some old Android devices have trouble with external SVG resources, the svgxuse polyfill is used to fix this issue. Keyamoon's approach is way more performant as svg4everybody. IE 8 and below are not supported.

Examples

The following outlines are given to visualize the element boundaries.

Red dashed outline: SVG dimensions
Green dotted outline: Wrapping div dimensions

Example #1 - 1.5em fixed height

aeropress

americano

coffee-grinder

espresso-machine

portafilter

Example #2 - 50px fixed height

Example #3 - responsive behaviour

SVG default behavior of your browser

No width and height set, no css applied. Usually this will result in 300×150px image.