Для моего проекта (веб-сайта) я использую пакет NPM с именем gulp-svg-sprite, который помещает все мои SVG-изображения в один файл sprites.svg и создает файл sprites.css.
In sprites.CSS, есть классы CSS, для которых background-image
свойство установлено на изображение svg внутри 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;
}
Отображение желаемогоИзображение SVG в index.html :
<span class="icon icon-logo"></span>
Проблема : фоновое изображение SVG слишком большое
Попытка решитьпроблема - пытается изменить его размер, но он не работает:
index.html:
<style>
.icon-logo:before {
width: 130px;
height: auto;
}
</style>