Change SVG Colour

Question

Can you change the color of a shape inside an SVG? Currently I'm using a PNG that I have to manually create in Photoshop for each different menu and I'm wondering if I can make the whole process dynamic.

Answer 1

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

EDIT: My mistake, the one you need is fill, so style="fill:#------;", and it should work with any shape.

Answer 2

You could use a hue-rotate filter, or you could fix the colors as suggested above. Probably more compatible to change the colors to what you need, but in any case, here's an example of the filter variant:

<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 live here if you use a browser that supports svg filters, e.g Opera or Firefox.