Как сделать закрашивание SVG иконки на hover?

Есть две иконки: 1-ая (иконка сверху) стоит обычная, но при ховере она должна закрашиваться (иконка снизу). Как такое реализовать, да еще и плавно, желательно?
P.S. Вариант только создать две png иконки и подменять при ховер ?

Ответ

Чтобы при ховере изменять цвет заливки, используйте свойство fill-opacity и, при необходимости, stroke-opacity
svg { display: block; width: 200px; height: 162px; margin: 40px auto; } path { fill-opacity: 0; fill: #f00; stroke: #f00; transition: all 0.4s linear; } svg:hover path { fill-opacity: 1; stroke-opacity: 0; }