Responsive landing page with CSS and Flexbox
Design comparison
Solution retrospective
Dear coders, kindly advice me here, how do l change the color of an SVG image? You will notice that l struggled to change the colour of the logo picture at the footer section. Anyone with knowledge or an informative link?
Community feedback
- @dwhensonPosted over 2 years ago
Hey @BhekiAccion, nice work here!
So to manipulate SVGs you have to 'inline' them in the HTML document. That is, actually paste the SVG as code. From there you will be able to target the different elements inside the SVG itself, if you add an SVG as an image as you have, then it's impossible to change the colour on hover etc.
It can look a bit intimidating the first time you do this, but it's worth getting comfortable with doing this and targeting the relevant elements inside the SVG itself. It's also better for performance so you get a bonus of doing things this way. I find it helpful to think of the SVG as a document in itself.
Hope this helps,
Cheers
Dave
Marked as helpful1@BhekiAccionPosted over 2 years ago@dwhenson Thank you, this is really helpful. l appreciate it.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord