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.

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

Hello
If by XML file You are refering to the SVG file, You can put an inline style sheet, like it's explained here:

http://tutorials.jenkov.com/svg/svg-and ... yle-sheets

Inside that style sheet, you can put the keyframes for animation, or the transition.

But please be aware that transitions or CSS animations works very bad or doesn't work at all in MS web browsers. In fact, they recommend using javascript for making SVG animations !!.

See this sample codepen I have, which works OK in Chrome and Firefox:
http://codepen.io/hulf2015/pen/yNWRwm

hulf2012, wow this awesome! You hit the nail on the head on this one. I was looking for something like this. Thank you so much