Не подключаются svg так, как нужно?

Question

[hellcaster]

У меня есть svg Twitter'a. Когда я подключаю через <img src="" alt=""> у меня все хорошо, но когда через <svg></svg> у меня получаестся криво

Результат

Справа через img, слева через тег svg.

Мне нужно при наведение и фокусе стилизовать картинку, потому я и выбрал <svg></svg>.
Какие могут бить проблемы?

HTML код

<ul>
	<li class="socialLink">
		<a href="https://twitter.com" target="_blank">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="15" viewBox="0 0 17 15"><image overflow="visible" width="17" height="15" xlink:href="t.png"/><path fill="#FFF" d="M10.95.144c1.685-.496 2.984.27 3.577 1.179.673-.231 1.331-.481 2.011-.708a2.345 2.345 0 0 1-.857 1.768c.685.17 1.304-.491 1.304-.491-.169 1-1.006 1.788-1.563 2.024-.231 6.75-3.175 11.217-10.077 11.082h-.446c-.41 0-4.164-.46-4.898-1.887 2.271.196 3.893-.422 4.693-1.177-.96-.3-2.679-.477-2.979-2.95.349.106.564.228 1.19.119C1.705 8.247.374 7.53.448 5.33c.285.328 1.067.536 1.34.472C1.085 5.561-.182 2.442.894.85c1.818 1.854 3.735 3.606 7.152 3.773C8.254 2.33 9.183.793 10.95.144z"/></svg>
		</a>
	</li>
	<li class="socialLink">
		<a href="https://www.facebook.com" target="_blank">
			<img src="img/twitter.svg" alt="">
		</a>
	</li>
</ul>

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="15" viewBox="0 0 17 15"><image overflow="visible" width="17" height="15" xlink:href="t.png"/><path fill="#FFF" d="M10.95.144c1.685-.496 2.984.27 3.577 1.179.673-.231 1.331-.481 2.011-.708a2.345 2.345 0 0 1-.857 1.768c.685.17 1.304-.491 1.304-.491-.169 1-1.006 1.788-1.563 2.024-.231 6.75-3.175 11.217-10.077 11.082h-.446c-.41 0-4.164-.46-4.898-1.887 2.271.196 3.893-.422 4.693-1.177-.96-.3-2.679-.477-2.979-2.95.349.106.564.228 1.19.119C1.705 8.247.374 7.53.448 5.33c.285.328 1.067.536 1.34.472C1.085 5.561-.182 2.442.894.85c1.818 1.854 3.735 3.606 7.152 3.773C8.254 2.33 9.183.793 10.95.144z"/></svg>

Comments

[hellcaster]

Павел Аничин, вот svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="15" viewBox="0 0 17 15"><image overflow="visible" width="17" height="15" xlink:href="t.png"/><path fill="#FFF" d="M10.95.144c1.685-.496 2.984.27 3.577 1.179.673-.231 1.331-.481 2.011-.708a2.345 2.345 0 0 1-.857 1.768c.685.17 1.304-.491 1.304-.491-.169 1-1.006 1.788-1.563 2.024-.231 6.75-3.175 11.217-10.077 11.082h-.446c-.41 0-4.164-.46-4.898-1.887 2.271.196 3.893-.422 4.693-1.177-.96-.3-2.679-.477-2.979-2.95.349.106.564.228 1.19.119C1.705 8.247.374 7.53.448 5.33c.285.328 1.067.536 1.34.472C1.085 5.561-.182 2.442.894.85c1.818 1.854 3.735 3.606 7.152 3.773C8.254 2.33 9.183.793 10.95.144z"/></svg>

Answer 1

[hellcaster]

Проблему вырешил через opacity к img

Answer 2

[lagudal]

у вас в svg зачем то сохранена контуром png картинка, уберите ее и пересохраните svg.

Comments

[hellcaster]

xlink:href="t.png"??????

[lagudal]

ну так да - предполагаю, что вы в иллюстраторе открыли png-иконку твиттера, и по ней прорисовывали птичку(хотя зачем? векторного твиттера ж на каждом углу).
Ну да ладно. Теперь, подключая svg, автоматом подгружается и картинка, которой видно в той же папке, где и svg, нет.

[hellcaster]

lagudal, я ее не рисовал. Это сразу с PSD макета. Я в слоях 2 раза нажал и мне открылся в редакторе и я сохранил.

[lagudal]

ну значит кто делал макет не удалил картинку.
Вообще иконки популярных брендов-трендов в векторе брать готовые, зачем придумывать что то? Если подключен например font-awesome, то как шрифт, или есть масса мест, где бесплатно качественные иконки имеются. Например тут