CODEWITHSUNDEEP
svg
Rick
Rick

Reputation: 273

Change SVG Colour

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.

Upvotes: 4

Views: 11815

Answers (3)

pluke
pluke

Reputation: 4346

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

Code like so:

 <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 matching your image then programmatically change the colour attached to it. You might want to use a tool like inkscape to lend a hand.

Upvotes: 2

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

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.

Upvotes: 2

Brendan Long
Brendan Long

Reputation: 54232

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.

Upvotes: 8

Related Questions