SVG sprites

svg sprites

An SVG sprite is, simply speaking, a container for all the SVG icons that you are using in your website project, which allows inline referencing of single icons within <use> tags.

Despite being slightly less supported than webfont icons, SVG sprites are the modern method of choice for embedding icons when compatibility “up to two previous versions” is deemed enough.

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.

svg sprites download

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

svg sprites xhref

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

svg sprites code 2

Example of use

Here you can see the code:

svg sprites code

…and the visual result:

svg sprites fruit 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

The content published on this website is for informational purposes only and does not constitute legal advice.


Total
0
Shares
Prev
Using webfont icons in web development

Using webfont icons in web development

You downloaded the Futuramo webfont pack and now want to use it in your web

Next
Connect with us through social media!

Connect with us through social media!

We have joined Instagram!

You May Also Like