Почему у SVG изображений отличаются размеры от фактических?

Question

[Evgeniy]

Всем привет!

Использую gulp для сборки
nodejs, phyton, npm и пр.модули последних версий всё норм
для сборки спрайта gulp-svg-sprite

Проблема с размером изображений, при одинаковых условиях, они ведут себя по разному...
В песочнице подробнее расписал
Подскажите пожалуйста что я делаю не так?
Как надо?

https://codepen.io/Zhelezniy/pen/KKZezJW

Answer 1

[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>

Comments

[Evgeniy]

Да.. это верно! Спасибо! Вложенность всё портит.. буду менять таск спрайтов