↑こんなデザインデータが届いた場合、単純にマウスホバーで透過させるだけでは何か味気ない･･･。
出来れば、マウスホバー時に公式のカラーが出るとオシャレだなぁ～と方法を思い考えてみました。

SVGに対してCSSでfillを指定すればと思いましたが、htmlの<imgタグでSVGを読み込んでいる場合は、JSなどを駆使しないと変更が出来ないようです。
直にSVGを書く手もありますが、正直これはしたくありません。
また、TwitterとFacebookだけだと可能ですが、Instagramが入るとグラデーション処理が必要なため実現が難しくなります。

そこで、単純に昔からある手法（ロールオーバー）を使うことにしましたが、
JS使う必要あるかな？とふと思い、CSSだけで表現することにしました。

demo

html

<ul class="sns_demo">
<li>
<a href="#">
<img src="/images/sns_fb_off.svg" alt="Facebook" class="off">
<img src="/images/sns_fb_on.svg" alt="Facebook" class="on">
</a>
</li>
<li>
<a href="#">
<img src="/images/sns_tw_off.svg" alt="Twitter" class="off">
<img src="/images/sns_tw_on.svg" alt="Twitter" class="on">
</a>
</li>
<li>
<a href="#">
<img src="/images/sns_in_off.svg" alt="Instagram" class="off">
<img src="/images/sns_in_on.svg" alt="Instagram" class="on">
</a>
</li>
</ul>

css

ul.sns_demo {
	margin: 0;
	max-width: 500px;
	font-size: 0;
}
ul.sns_demo li {
	display: inline-block;
	vertical-align: top;
	width: calc(100%/3);
	margin: 0;
}
ul.sns_demo li a {
	display: block;
	max-width: 120px;
	margin: 0 auto;
	position: relative;
}
ul.sns_demo li img.off {
	transition: 0.5s all;
	position: relative;
	z-index: 2;
}
ul.sns_demo li img.on {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
ul.sns_demo li a:hover img {
	opacity: 1;
}
ul.sns_demo li a:hover img.off {
	opacity: 0;
}

補足

cssの29行目の意味不明な opacity: 1; については、当方のリセットCSSで a:hover img について透過処理を施している為、それを無効化するためのものです。
かなりシンプルに実現できていると思うので特に説明はありませんが、分からない場合は問い合せよりご連絡ください！