SVG Sprite with CSS background-size: 100% auto;

Question

Good day.

I am currently building a website and I would like to make the transition from icon fonts to pure svg icons.

The problem is when I try to use my SVG sprite (1:3 width to height ratio) as a background

.icon {
  width: 1em;
  height: 1em;
  background-image: url('path/to.svg');
  background-position: 0 0;
  background-size: 100% auto;
}

It is scaled down and my hover effect (below) gets awkwardly positioned.

.icon:hover,
.icon:focus {
  background-position: 0 -1em;
}

It works correctly when I have a sprite sized 1:2 width to height ratio.

Any suggestions?

Sincerely, Sebastian.

Answer 1

preserveAspectRatio="xMinYMin slice"

This code solved it. Thank you AmeliaBR.

EDIT:

If you are using Adobe Illustrator to export your SVG files, remember to uncheck "Responsive". Otherwise the sprite will not work as intended in Internet Explorer.