So I'd like to finally take the plunge and use an SVG logo I made in Inkscape for my website. I want to give it a transition when you hover over it and have the fill change colors too. I was wondering how I could achieve this via my xml file. I searched on google, but couldn't find a quality answer, so I figured I'd ask the experts on the Inkscape Forum. This seems like something that would be easy to do, but there isn't much help via other resources.

On the Inkscape website, we have a couple of SVG buttons that do this. They use an SVG with two images inside as a background image, and move the area that is displayed when you hover over them. E.g. the flag or the star icons on the gallery image pages (example: https://inkscape.org/en/~pestodesign/%E ... tasy-skull ). It's all CSS, no js, no image directly in the page html. Not sure if that's what you'd want, though, but it's one way to achieve this.

Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Hey Moini, thanks so much for the response. I believe what you are referring to is an image sprite. This usually works well, and is an excellent solution for most cases. I want to be able to apply css transitions so there is a delay on the hover fill