Change SVG color

Question

Can you change the color of the form inside the SVG? I am currently using PNG, which I have to manually create in Photoshop for every other menu, and I wonder if I can make the whole process dynamic.

Answer 1

Can't you just use style="background-color: #------;" (or maybe color: ?

EDIT: My mistake is that what you need is being filled, so style="fill:#------;" , and it should work with any form.

Answer 2

You can use an alternating filter, or you can correct the colors as suggested above. Probably more compatible to change the colors to what you need, but in any case, here is an example of a filter option:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="h200" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="200"/> </filter> <image xlink:href="http://imgur.com/D9aFo.png" width="207" height="46" filter="url(#h200)"/> </svg> 

You can see it here if you use a browser that supports svg filters like Opera or Firefox.

Answer 3

@Brendan_Long is true, all you need is a path object style tag. See the demo here: http://kemputing.com/demo/shapeDemoColour.svg

The code is:

  <path style="fill:#000080;" d="M 125.0,478.0 172.0,305.0 337.0,266.0 508.0,438.0 482.0,586.0 287.0,659.0 z" id="path2985"/> 

Make a path that matches your image, then programmatically change the color attached to it. You might want to use a tool like inkscape to reach out.