How to change background color in SVG?-CodePudding

How can I change SVG image to have background color #ff3400 and color of quotes to #ffffff ? Here is HTML:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508.044px" height="508.044px" viewBox="0 0 508.044 508.044" style="enable-background:new 0 0 508.044 508.044;" xml:space="preserve">
    <g>
        <g>
            <path d="M0.108,352.536c0,66.794,54.144,120.938,120.937,120.938c66.794,0,120.938-54.144,120.938-120.938
            s-54.144-120.937-120.938-120.937c-13.727,0-26.867,2.393-39.168,6.61C109.093,82.118,230.814-18.543,117.979,64.303
            C-7.138,156.17-0.026,348.84,0.114,352.371C0.114,352.426,0.108,352.475,0.108,352.536z" />
            <path d="M266.169,352.536c0,66.794,54.144,120.938,120.938,120.938s120.938-54.144,120.938-120.938S453.9,231.599,387.106,231.599
            c-13.728,0-26.867,2.393-39.168,6.61C375.154,82.118,496.875-18.543,384.04,64.303C258.923,156.17,266.034,348.84,266.175,352.371
            C266.175,352.426,266.169,352.475,266.169,352.536z" />
        </g>
    </g>
</svg>

CodePudding user response：

Styling the svg background using css works:

EDIT: background is #ff3400 using css and foreground is #ffffff by setting fill within the svg.

svg {
  background: #ff3400;
}

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508.044px" height="508.044px" viewBox="0 0 508.044 508.044" fill="#ffffff" xml:space="preserve">
    <g>
        <g>
            <path d="M0.108,352.536c0,66.794,54.144,120.938,120.937,120.938c66.794,0,120.938-54.144,120.938-120.938
            s-54.144-120.937-120.938-120.937c-13.727,0-26.867,2.393-39.168,6.61C109.093,82.118,230.814-18.543,117.979,64.303
            C-7.138,156.17-0.026,348.84,0.114,352.371C0.114,352.426,0.108,352.475,0.108,352.536z" />
            <path d="M266.169,352.536c0,66.794,54.144,120.938,120.938,120.938s120.938-54.144,120.938-120.938S453.9,231.599,387.106,231.599
            c-13.728,0-26.867,2.393-39.168,6.61C375.154,82.118,496.875-18.543,384.04,64.303C258.923,156.17,266.034,348.84,266.175,352.371
            C266.175,352.426,266.169,352.475,266.169,352.536z" />
        </g>
    </g>
</svg>

CodePudding user response：

You can either use inline styles or add a style tag to your html.

Inline:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="508.044px" height="508.044px" viewBox="0 0 508.044 508.044" style="background-color:#ff3400;enable-background:new 0 0 508.044 508.044;" xml:space="preserve">
    <g>
        <g>
            <path style="fill:#fff;" d="M0.108,352.536c0,66.794,54.144,120.938,120.937,120.938c66.794,0,120.938-54.144,120.938-120.938
            s-54.144-120.937-120.938-120.937c-13.727,0-26.867,2.393-39.168,6.61C109.093,82.118,230.814-18.543,117.979,64.303
            C-7.138,156.17-0.026,348.84,0.114,352.371C0.114,352.426,0.108,352.475,0.108,352.536z" />
            <path style="fill:#fff;" d="M266.169,352.536c0,66.794,54.144,120.938,120.938,120.938s120.938-54.144,120.938-120.938S453.9,231.599,387.106,231.599
            c-13.728,0-26.867,2.393-39.168,6.61C375.154,82.118,496.875-18.543,384.04,64.303C258.923,156.17,266.034,348.84,266.175,352.371
            C266.175,352.426,266.169,352.475,266.169,352.536z" />
        </g>
    </g>
</svg>

Style tag:

<style>
    svg  { background-color:#ff3400 }
    path { fill:#fff; }
</style>

CodePudding user response：

All you have to do is set a background-color in a SVG and also select all SVG path and set a fill color. Like:

svg{ /* select the SVG */
   backgorund-color: #ff3400;
}
   
svg path{ /* select the paths */
   fill: #ffffff;
}