SVG odd (random) colors - svg

Question

I am using .SVG files instead of .PNG for a small website I am building and I am encountering an issue with colors.
Whenever I add or remove an .SVG file to my code, all the the other .SVG file (logos) change colors and can't figure out why.
Here is an example of an SVG file :
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#27346A;}
.st1{fill:#2790C3;}
.st2{fill:#1F264F;}
</style>
<g>
<path class="st0" d="M408.5,38.6C384.8,11.6,341.9,0,287.1,0H128c-11.2,0-20.7,8.2-22.5,19.2L39.2,439.4
c-1.3,8.3,5.1,15.8,13.5,15.8H151l24.7-156.5l-0.8,4.9c1.8-11.1,11.2-19.2,22.4-19.2H244c91.7,0,163.5-37.2,184.5-145
c0.6-3.2,1.2-6.3,1.6-9.3c-2.6-1.4-2.6-1.4,0,0C436.3,90.3,430,63.2,408.5,38.6"/>
<path class="st0" d="M213.2,115.7c2.6-1.2,5.5-1.9,8.6-1.9h124.7c14.8,0,28.6,1,41.1,3c3.6,0.6,7.1,1.2,10.5,2
c3.4,0.8,6.7,1.6,9.9,2.5c1.6,0.5,3.2,0.9,4.7,1.5c6.2,2.1,12,4.5,17.2,7.3c6.2-39.8,0-66.9-21.6-91.5C384.8,11.6,341.9,0,287.1,0
H128c-11.2,0-20.7,8.2-22.5,19.2L39.2,439.4c-1.3,8.3,5.1,15.8,13.5,15.8H151l51.2-324.6C203.2,123.9,207.5,118.5,213.2,115.7z"/>
<path class="st1" d="M428.4,139.4c-21,107.7-92.8,145-184.5,145h-46.7c-11.2,0-20.7,8.2-22.4,19.2l-30.7,194.6
c-1.1,7.3,4.5,13.8,11.8,13.8h82.8c9.8,0,18.1-7.1,19.7-16.8l0.8-4.2l15.6-98.9l1-5.5c1.5-9.7,9.9-16.8,19.7-16.8h12.4
c80.2,0,143-32.6,161.4-126.8c7.7-39.4,3.7-72.3-16.6-95.4c-6.1-7-13.8-12.8-22.7-17.5C429.6,133.1,429.1,136.2,428.4,139.4z"/>
<path class="st2" d="M408.1,121.3c-3.2-0.9-6.5-1.8-9.9-2.5c-3.4-0.8-6.9-1.4-10.5-2c-12.6-2-26.4-3-41.2-3H221.8
c-3.1,0-6,0.7-8.6,2c-5.8,2.8-10,8.2-11.1,14.9l-26.5,168.1l-0.8,4.9c1.7-11.1,11.2-19.2,22.4-19.2H244
c91.7,0,163.5-37.2,184.5-145c0.6-3.2,1.1-6.3,1.6-9.3c-5.3-2.8-11.1-5.2-17.2-7.3C411.3,122.3,409.7,121.8,408.1,121.3"/>
</g>
</svg>
I attached a codepen portion of the code : https://codepen.io/testingsonmcd/pen/NWRLdgJ
If you remove the last svg file, the first 2 logos will display with the desired colors.

Answer 1

The <style> inside your svgs aren't scoped, meaning their rules will affect the whole document.
Since several of these rules affect the same property of the same selector, they'll conflict with each other.
Simplification of OP's problem:
<svg viewBox="0 0 50 50" width="50" height="50">
<style>
rect { fill: red; }
</style>
<rect width="50" height="50"/>
</svg>
<svg viewBox="0 0 50 50" width="50" height="50">
<style>
rect { fill: green; }
</style>
<rect width="50" height="50"/>
</svg>
<svg viewBox="0 0 50 50" width="50" height="50">
<style>
rect { fill: blue; }
</style>
<rect width="50" height="50"/>
</svg>
Simply choose better selectors for your CSS, for instance you could add a unique class name to each of the root <svg> and append that in front of each selector:
<svg class="svg-1" viewBox="0 0 50 50" width="50" height="50">
<style>
.svg-1 rect { fill: red; }
</style>
<rect width="50" height="50"/>
</svg>
<svg class="svg-2" viewBox="0 0 50 50" width="50" height="50">
<style>
.svg-2 rect { fill: green; }
</style>
<rect width="50" height="50"/>
</svg>
<svg class="svg-3" viewBox="0 0 50 50" width="50" height="50">
<style>
.svg-3 rect { fill: blue; }
</style>
<rect width="50" height="50"/>
</svg>