I used to SVG Spritemap Webpack Plugin for autocompilation of svg sprite.
My plugin config is looks like this
new SVGSpritemapPlugin([
'./src/common/components/VSvgSprite/icons/illustration/**/*.svg',
'./src/common/components/VSvgSprite/icons/decor/**/*.svg'
],{
output: {
filename: 'img/graphics-sprite.svg',
svg4everybody: true,
svgo: true,
},
sprite: {
prefix: false,
generate: {
title: false,
use: true,
view: true
}
},
}),
After compilation I have a sprite file with svg
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="test" viewBox="0 0 400 150"><path d="M1920 195H0V76.744C178.587 27.184 366.14.536 559.586.008L565.45 71.556l5.414 1.455c126.25 32.248 252.57 49.53 378.958 51.845 139.624 2.559 279.453-13.125 419.497-47.09l4.244-1.035V195z"/></symbol>
<view id="test" viewBox="0 0 400 150"/>
<symbol id="wave" viewBox="0 0 1920 195"><path fill="#0b9a8" d="M1920 195H0V76.744C178.587 27.184 366.14.536 559.586.008L565.45 0l5.716.008c186.645.496 367.807 25.308 540.722 71.556l5.414 1.455c126.25 32.248 252.57 49.53 378.958 51.845 139.624 2.559 279.453-13.125 419.497-47.09l4.244-1.035V195z"/></symbol>
<view id="wave" viewBox="0 150 1920 195"/>
</svg>
Here I'm trying to use fragment wave
into .scss
file in a Vue component
component.scss
.block {
height: 500px;
width: 100%;
background: url($path-to-sprite + '#wave') no-repeat;
background-size: cover;
}
But on the web page fragment is not rendered, because rendered all fragments from sprite. If I use background styles like this
.block {
height: 500px;
width: 100%;
background: url($path-to-decor-sprite + "#svgView(viewBox(0, 150, 1920, 195))");
background-size: cover;
}
Everything is good. But it's not usefull way for my project.