SVG переопределяет мой цвет фона

Question

Мне было интересно, как я могу использовать SVG «на» фоне? Не использовать SVG «как» фон.

У меня есть мой div с кодом css с цветом фона. но когда я импортирую SVG, фон становится белым. SVG переопределяет цвета фона?

Есть ли способ импортировать его, не влияя на фон, но сохраняя форму SVG?

background: -webkit-linear-gradient(#EAFEFF, #DFF3FF); 
background: -moz-linear-gradient(#EAFEFF, #DFF3FF); 
border: 1px solid #000; 
-webkit-border-radius:10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
background-image: url(SVG/revenue_icon.svg), none; 
background-size: 100%; 
width: 92%; 
height: 92%; 
margin: 1px 1px; 

SVG:

<?xml version="1.0" encoding="utf-8"?> 
<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 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#05415B;} 
</style> 
<g id="XMLID_94_"> 
    <path id="XMLID_122_" class="st0" d="M102.1,32.7H47.9c-4,0-7.2,3.2-7.2,7.2v70.1c0,4,3.2,7.2,7.2,7.2h54.2c4,0,7.2-3.2,7.2-7.2 
     V39.9C109.3,36,106.1,32.7,102.1,32.7z M75.1,101.1L61.5,76.2l7.7-0.2V48.9h12.7v26.9l8-0.2L75.1,101.1z"/> 
</g> 
</svg> 

Спасибо заранее

Answer 1

(фон) Градиенты в CSS рассматриваются как фоновое изображение (css-tricks), так что вы перекрывая градиент здесь, фонового изображения : url (SVG/income_icon.svg), нет;

Вы могли бы сделать что-то вроде этого:

.container::after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: url(SVG/revenue_icon.svg) no-repeat; 
}