Почему в svg размер use 0x0?

Question

[malayamarisha]

Всем привет.
Пытаюсь вывести svg из sprite и при отладке размер use=0x0:

<svg>
    <use xlink:href="/images/sprite.svg#home"></use>
</svg>

Тут же вывожу другую иконку (arrow) и она выводится без проблем.
Подскажите, что делаю не так?

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow" viewBox="0 0 612.007 612.007">
        <g>
            <path d="M596.168,130.647c-21.119-21.169-55.382-21.169-76.526,0L306.013,366.44L92.384,130.647
				c-21.144-21.169-55.382-21.169-76.525,0c-21.144,21.169-21.144,55.458,0,76.627l248.504,274.31
				c11.438,11.438,26.672,16.482,41.651,15.54c14.953,0.942,30.213-4.102,41.65-15.54l248.505-274.31
				C617.287,186.105,617.287,151.817,596.168,130.647z"/>
        </g>
    </symbol>
        <symbol id="home" viewBox="0 0 30 26">
        <g>
            <path d="M4.77002 10.4611V24.0769C4.77002 24.3217 4.86727 24.5565 5.04038 24.7296C5.21349 24.9027 5.44828 25 5.6931 25H11.2316V17.1536C11.2316 16.7864 11.3774 16.4342 11.6371 16.1745C11.8968 15.9148 12.249 15.769 12.6162 15.769H17.2316C17.5988 15.769 17.951 15.9148 18.2106 16.1745C18.4703 16.4342 18.6162 16.7864 18.6162 17.1536V25H24.1546C24.3994 25 24.6342 24.9027 24.8073 24.7296C24.9805 24.5565 25.0777 24.3217 25.0777 24.0769V10.4611" stroke="#C15C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M27.8462 12.9993L15.5513 1.22977C15.2629 0.925144 14.5885 0.921683 14.2948 1.22977L2 12.9993M23.2308 8.55688V1.92209H20.4615V5.90296" stroke="#C15C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
    </symbol>
</svg>

Comments

[Ankhena]

Подскажите, что делаю не так?

Вероятно, забыли намекнуть браузеру, а какого размера она должна быть.

И пока не поздно, переходите с символьных спрайтов на стеки из svg. И вставляйте их в css (ну или куда угодно, без ограничений символьных). Жизнь покажется ярче.

[malayamarisha]

Ankhena,

переходите с символьных спрайтов на стеки из svg

- правильно понимаю, что имеете ввиду так?

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
            <![CDATA[
            .sprite { display: none; }
            .sprite:target { display: inline; }
            ]]>
        </style>
    </defs>
    <g class="sprite" id="circle">
        <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" />
    </g>
    <g class="sprite" id="square">
        <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
    </g>
    <g class="sprite" id="triangle">
        <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" />
    </g>
    <g class="sprite" id="home">
        <path d="M4.77002 10.4611V24.0769C4.77002 24.3217 4.86727 24.5565 5.04038 24.7296C5.21349 24.9027 5.44828 25 5.6931 25H11.2316V17.1536C11.2316 16.7864 11.3774 16.4342 11.6371 16.1745C11.8968 15.9148 12.249 15.769 12.6162 15.769H17.2316C17.5988 15.769 17.951 15.9148 18.2106 16.1745C18.4703 16.4342 18.6162 16.7864 18.6162 17.1536V25H24.1546C24.3994 25 24.6342 24.9027 24.8073 24.7296C24.9805 24.5565 25.0777 24.3217 25.0777 24.0769V10.4611" stroke="#C15C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M27.8462 12.9993L15.5513 1.22977C15.2629 0.925144 14.5885 0.921683 14.2948 1.22977L2 12.9993M23.2308 8.55688V1.92209H20.4615V5.90296" stroke="#C15C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
</svg>

Использование:

<object type="image/svg+xml" data="/images/sprite2.svg#home"></object>

В консоли видны все изображения . Хотелось бы этого избежать.

[Ankhena]

malayamarisha, какой ещё object, 2023 год на дворе.

Внутри спрайта заменяете symbol на svg.
https://www.npmjs.com/package/gulp-stacksvg

[malayamarisha]

Ankhena,

какой ещё object, 2023 год на дворе

- такие же мысли посетили )
Спасибо )