using SVG from sprite in a background - html

Question

My goal is to use SVG in repeated background, but I need to be able to change its fill color in CSS for usage in the different parts of the website.
As far as my understanding of the SVG, it can't be laoded as an external file (background:url(image.svg)), because then I am not able to change the CSS property like fill proeprty of it. On the other hand, SVG can't be inlined in HTML (<svg>...</svg>) as then I am not able to use/reference it in background property.
Please correct me if I am wrong, or do you have any solution for this?

Answer 1

As far as my understanding of the SVG, it can't be laoded as an
external file (background:url(image.svg)), because then I am not able
to change the CSS property like fill proeprty of it.
Consider using CSS filters to change svg coloration instead of fill
In the example below the svg file is loaded as an external file:
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
and its color will be changed on hover using a combination of css filters
You can get the desired combination of filters for a specific color using the utility
https://codepen.io/sosuke/pen/Pjoqqp
Hover to change color
.android {
display:inline-block;
width:96px;
height:105px;
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
}
.android.blue:hover {
filter: invert(8%) sepia(99%) saturate(7454%) hue-rotate(248deg) brightness(100%) contrast(143%);
}
.android.red:hover {
filter: invert(25%) sepia(100%) saturate(7420%) hue-rotate(6deg) brightness(98%) contrast(122%);
}
.android.gold:hover {
filter: invert(50%) sepia(31%) saturate(3357%) hue-rotate(113deg) brightness(99%) contrast(101%);
}
<div class="android blue">
</div>
<div class="android red">
</div>
<div class="android gold">
</div>

Answer 2

Ok so it's not super simple but, it can be done with some work to the SVG itself. if you look at the simple example you will see inside the tag under the you can essentially make a pattern of any SVG elements like a circle,rect, or a path.
So make the pattern as
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
make sure the width and height are the same as your SVG or it will cut it off
then outside of the defs you can make a rect object with the fill of your pattern fill="url(#dots)" this must use the id of the pattern
Simple example
.pattern {
background-color: #2e4057;
height: 100vh;
}
<div class="pattern">
<svg width="100%" height="100%">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="25">
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
</div>
More advanced SVG
.pattern {
background-color: #2e4057;
height: 100vh;
}
<div class="pattern">
<svg width="100%" height="100%">
<defs>
<pattern id="duck" x="0" y="0" width="209" height="209" patternUnits="userSpaceOnUse">
<g>
<path fill="red" d="M105.572,101.811c9.889-6.368,27.417-16.464,28.106-42.166c0.536-20.278-9.971-49.506-49.155-50.878
C53.041,7.659,39.9,28.251,36.071,46.739l-0.928-0.126c-1.932,0-3.438,1.28-5.34,2.889c-2.084,1.784-4.683,3.979-7.792,4.308
c-3.573,0.361-8.111-1.206-11.698-2.449c-4.193-1.431-6.624-2.047-8.265-0.759c-1.503,1.163-2.178,3.262-2.028,6.226
c0.331,6.326,4.971,18.917,16.016,25.778c7.67,4.765,16.248,5.482,20.681,5.482c0.006,0,0.006,0,0.006,0
c2.37,0,4.945-0.239,7.388-0.726c2.741,4.218,5.228,7.476,6.037,9.752c2.054,5.851-27.848,25.087-27.848,55.01
c0,29.916,22.013,48.475,56.727,48.475h55.004c30.593,0,70.814-29.908,75.291-92.48C180.781,132.191,167.028,98.15,105.572,101.811
z M18.941,77.945C8.775,71.617,4.992,58.922,5.294,55.525c0.897,0.24,2.194,0.689,3.228,1.042
c4.105,1.415,9.416,3.228,14.068,2.707c4.799-0.499,8.253-3.437,10.778-5.574c0.607-0.509,1.393-1.176,1.872-1.491
c0.87,0.315,0.962,0.693,1.176,3.14c0.196,2.26,0.473,5.37,2.362,9.006c1.437,2.761,3.581,5.705,5.646,8.542
c1.701,2.336,4.278,5.871,4.535,6.404c-0.445,1.184-4.907,3.282-12.229,3.282C30.177,82.591,23.69,80.904,18.941,77.945z
M56.86,49.368c0-4.938,4.001-8.943,8.931-8.943c4.941,0,8.942,4.005,8.942,8.943c0,4.931-4.001,8.942-8.942,8.942
C60.854,58.311,56.86,54.299,56.86,49.368z M149.159,155.398l-20.63,11.169l13.408,9.293c0,0-49.854,15.813-72.198-6.885
c-11.006-11.16-13.06-28.533,4.124-38.84c17.184-10.312,84.609,3.943,84.609,3.943L134.295,147.8L149.159,155.398z"/>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#duck)"></rect>
</svg>
hope this helps
a more complete tutorial here