Downloading Futuramo SVG sprites

To download an icon SVG sprite, proceed just like with downloading a webfont pack, but choosing “SVG sprite” in the download dialog instead. You don’t need to name the sprite (technically, it is just a collection of icons, as opposed to a font-face), but you can name the archive that you download for your convenience.

futuramo-icons-svg-sprites-download-modal

The .zip archive that you download contains a demonstration of SVG sprite usage.

futuramo-icons-sprite

Each icon is subscribed with the automatically generated xhref reference that is used within the <use> tag.

futuramo-svg-sprite

Example of use

Here you can see the code:

futuramo-svg-sprites-code

…and the visual result:

futuramo-icons-svg-sprites-example

Why use SVG sprites for icons?

  1. Good browser support (all modern browsers, legacy browsers up to IE 8)
  2. Good support of css styling
  3. Inlined in the document – no need for separate requests
  4. Straightforward referencing and positioning, quick and reliable rendering in most browsers
  5. Good semantics – an <svg> tag already depicts an image resource