SVG Object - Change color

Question

I just start working with SVG and i faced with one problem - i can't change color of SVG image pasted via "object".

I Have a following code:

<object data="../img/svg/test.svg" type="image/svg+xml"></object>

test.svg file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="949.3px" height="949.3px" viewBox="0 0 949.3 949.3" style="enable-background:new 0 0 949.3 949.3;" xml:space="preserve">
<g>
    <path d="M899.3,338.1L544,337.7c0,0,20.6-84.3,24.3-123.8c2.5-27,3.101-53.9-3.1-80.5c-9.2-40-19.5-65-35.9-96   C520.5,21,503.5,10.8,485,10.8h-68.8c-27.7,0-50.101,22.5-50,50.2c0.2,46.3,0.2,108.1-0.8,110.2C338.4,228,307.1,282.5,271.8,334.5   c-16.1,23.8-33,46.9-52.6,68c-8.6,9.2-13.3,21.4-13.3,33.9v437.201c0,12.898,5,25.398,14,34.699   c13.4,13.801,37.4,30.199,76.8,30.199c124.3-0.5,325.7-1.6,468.899-0.6c17.9,0.1,34.5-9.299,43.5-24.799L935.4,696.9   c8.6-15,13.1-32,13.199-49.299l0.7-259.301C949.3,360.6,926.9,338.2,899.3,338.1z"/>
    <path d="M94.8,409.5H50c-27.6,0-50,22.4-50,50v429c0,27.602,22.4,50,50,50h44.7c27.6,0,50-22.398,50-50v-429   C144.8,431.9,122.4,409.5,94.8,409.5z"/>
</g>

How i can change the color of this SVG? I already tried a different ways to ember SVG and "fill:", but for some reason it does not work.

Thanks in advance!

JX0 · Answer 1 · 2016-10-09T19:51:25.237

-1

SVG reference

Add such as fill="black" or stroke="red" with the color code you need to target element.

Example:

<g fill="blue">

edited Oct 09 '16 at 19:51

answered Oct 09 '16 at 19:45

JX0

61
6

Just put "fill" in HTML code not working (at least in my case), but thank you! – Jameson Oct 09 '16 at 19:54

score -1 · Answer 2 · edited May 23 '17 at 12:00

Derived this from another answer of myself, this gives a green hand and clicking on the button changes it to yellow.

  <svg fill="green" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="949.3px" height="949.3px" viewBox="0 0 949.3 949.3" style="enable-background:new 0 0 949.3 949.3;" xml:space="preserve" >
  <g>
      <path d="M899.3,338.1L544,337.7c0,0,20.6-84.3,24.3-123.8c2.5-27,3.101-53.9-3.1-80.5c-9.2-40-19.5-65-35.9-96   C520.5,21,503.5,10.8,485,10.8h-68.8c-27.7,0-50.101,22.5-50,50.2c0.2,46.3,0.2,108.1-0.8,110.2C338.4,228,307.1,282.5,271.8,334.5   c-16.1,23.8-33,46.9-52.6,68c-8.6,9.2-13.3,21.4-13.3,33.9v437.201c0,12.898,5,25.398,14,34.699   c13.4,13.801,37.4,30.199,76.8,30.199c124.3-0.5,325.7-1.6,468.899-0.6c17.9,0.1,34.5-9.299,43.5-24.799L935.4,696.9   c8.6-15,13.1-32,13.199-49.299l0.7-259.301C949.3,360.6,926.9,338.2,899.3,338.1z"/>
      <path d="M94.8,409.5H50c-27.6,0-50,22.4-50,50v429c0,27.602,22.4,50,50,50h44.7c27.6,0,50-22.398,50-50v-429   C144.8,431.9,122.4,409.5,94.8,409.5z"/>
  </g>
</svg>
<button onclick=Capa_1.style.fill="yellow";>Click to change to yellow</button>

The dynamic setting was extra, your question was how to change the color, it's what de fill= "green" does, put my snippet in a html and it works — peter, Oct 09 '16 at 21:00

SVG Object - Change color

2 Answers2