SuperToster

У вашей банки размеры окна отображения — viewBox="0 0 184 60".
Вы её вкладываете в div.second с размерами width: 60px; height: 60px;.

Отвечая на ваш вопрос "размер в 3 раза больше" по тому, что — 184×60, это не 60×60.

Так получается из за того, что в вашем спрайте каша из вложенных друг в друга дескрипторов <svg>. Спрайт криво собран. Что то не так с gulp-svg-sprite или с вашими исходными файлами.

Если убрать из вашего спрайта пути, получится:

<?xml version="1.0" encoding="utf-8"?>

<svg viewBox="0 0 184 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<style>:root>svg{display:none;fill:#7fc3ba;}:root>svg:target{display:block}</style>

<svg viewBox="0 0 184 60" id="Logo" xmlns="http://www.w3.org/2000/svg">
	<path/>
</svg>

<svg version="1.1" id="banka" x="0" y="0" viewBox="0 0 60 60" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
	<style>.bst0{fill:#7fc3ba}</style>
	<path/>
</svg>

</svg>

На мой взгляд хороший спрайт должен выглядеть примерно так:

<svg aria-hidden="true" focusable="false" style="display: none;">
    <symbol id="logo" viewBox="0 0 184 60">
        <path/>
    </symbol>
    <symbol id="banka" viewBox="0 0 60 60">
        <path/>
    </symbol>
</svg>

Го разбираться.
Вот несколько девайсов и версий браузеров, новые и совсем древние.


Как я понимаю, всё норм. Отпишите пожалуйста конкретную модель тлф и браузер в котором косячит.

.

youpush.ru/demo.svg
Как сделал:
1. В графическом редакторе упростил цвета, выкрутил яркость чтобы убрать все полоски и прочее лишнее с картинки.
2. Открыл в Illustrator, трассировал, сохранил в SVG.
Дальше этот SVG можно использовать в HTML документе.