My current project involves the use of an NPM package called gulp-svg-sprite, which consolidates all my SVG images into a single file named sprites.svg and also generates sprites.css.
Within the sprites.css file, there are CSS classes that define their background-image property as the SVG image located inside sprite.svg.
sprites.css:
.icon:before {
content: ' ';
vertical-align: middle;
display: inline-block;
background-image: url(/img/sprite.svg);
background-repeat: no-repeat;
background-size: 71.7em 114.4em;
}
.icon.icon-logo:before {
background-position: 0em -98.5em;
width: 42.4em;
height: 8.6em;
}
Now, when displaying a specific SVG image in the index.html:
<span class="icon icon-logo"></span>
Issue: the SVG background image appears to be too large
Efforts to fix the problem have involved attempting to resize it with little success:
index.html:
<style>
.icon-logo:before {
width: 130px;
height: auto;
}
</style>