.SVG how to show (fadeIn part of image)

In my dom i have such code:

<div class="icon-animated"><img src="icon_non_active.svg" id="icon_non_active"></div>

I have two icons (.svg):

icon_non_active & icon_active

is it possible to animate transformation from icon_non_active into icon_active and stay on active icon state (there it has one more circle)?

?

i tried this plugin

but seems it's not for my case...

here are this icons:

https://dl.dropboxusercontent.com/u/59666091/svg/icon_non_active.svg

https://dl.dropboxusercontent.com/u/59666091/svg/icon_active.svg

How it is possible to fadeIn this red area?