How to change the color of a svg?

(wilson) #1

I thought it would be simple but it’s really hard

Can Confirm I’am just a Graphic Designer

#2

Hi Wilson,

Depending on what you want to achieve it can be pretty straightforward. Can you elaborate and what it is you want to do? Do you have the SVG code or are you using an <img ... tag to display it.

A little more info would help :smile:

Of course being a Graphic Designer if you created the SVG yourself could you not just create them in whatever colour you want? But. I’m certainly not a Graphic Designer so I’m not sure if this is achievable :slight_smile:

You can however manipulate the SVG using CSS and that I am sure is achievable :smile:

D

(wilson) #3

Hey thanks for the reply :grin:

I just want to change this svg from here http://www.flaticon.com/free-icon/fish-silhouette_40602 to change it’s colour when it’s clicked.

I figured out how to do this to the default shapes (like a square) in hype, so is it a similar process? :smile:

#4

How are you adding the SVG to your document?

Here is a file I have done to show you some color changes Let me know if you have any questions.

svg_fish.zip (50.1 KB)

To change the color of the SVG’s in the first couple of fish you have to edit the resource folder files in a text editor and change the fill attribute to your desired color.

If you add the code in manually you have more options to change things.

D

(wilson) #5

Wow thankyou I’ll open it right now (seriously thank you :blush:)

(wilson) #6

I really appreciate what you have done. This is a fantastic example :clap::clap::clap:

#7

Also, you can manipulate it using css like:

.yoursvg {
  fill: #94d31b; 
}
.yoursvg:hover {
  fill: #ace63c; 
}

this will change the color on hover :wink:

D