using SVG from sprite in a background

user_1554060 0
Viewed 213

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?

svg css html
2 Answers

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

enter image description here

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>

user_73948710

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

user_97418190
Related