SVG сам задает размер блока, как сделать адаптивным?

Question

[Tereverda]

Загружаю SVG спрайт, во внутреннем теге use изображение нужного размера, но сам SVG создает блок, хочу чтобы его не было и все было адаптивным исходя из класса img-fluid

Не нашел места, где на это можно повлиять в SVG.

Живой пример в подвале
Исходник SVG

<svg class="img-fluid"><use xlink:href="/logo.svg#glass"></use></svg>

Comments

[Ankhena]

Можно я отвечу вопросом на вопрос: а где вы ему указали какого он должен быть размера?

У класса image-fluid есть только это

.img-fluid {
    max-width: 100%;
    height: auto;
}

Оно и выполняется.

[Tereverda]

Ankhena, если убрать класс img-fluid ничего не меняется, у svg как будто предзаданный размер 300-150 пикселей.

[Ankhena]

Tereverda, вам не надо убирать класс.
Нужно дописать размеры (или пропорции или как вы хотите чтобы оно там себя вело)

[Tereverda]

Ankhena, фиксированные размеры задавал, результат тот же, размер внешнего блока не меняется, посмотри в диспетчере на примере https://ronbel.ru/ в футере

[Ankhena]

Tereverda, где размеры?

spoiler

Вот это

<svg class="img-fluid mb-3" alt="Фабрика картонных коробок РОНБЕЛ" width="100" height="77"><use xlink:href="https://ronbel.ru/wp-content/themes/5/logo.svg#perforation"></use></svg>

размеры.

Вот это

.img-fluid {
    max-width: 100%;
    height: auto;
    width: 100px;
    height: 77px;
}

тоже размеры.

С aspect-ratio тоже размеры.

[Tereverda]

Ankhena, висит стандартный вариант, размеры задавал, не работает, может что-то в самом svg нужно задать? или его размеры только через css можно менять?

[Ankhena]

Tereverda, см выше.
Да для размеров есть атрибуты width и height.

[Максим]

Ну сами посмотрите свой svg, есть тег но нету viewBox и нету namespace...
Вьюбокс задаёт некие размеры которые позволят этому svg полностью заполнить контейнер...
Это обязательный атрибут...и егонадо писать и в теге svg и так же в symbol а что бы скрыть его это если он в html применяют display со значением none.
А если этот svg как отдельный файл то viewBox вообще обязателен

[Tereverda]

Максим, из symbol удаляю и переношу в тег svg viewbox - верная логика?
по идее в symbol можно, только id оставить?

[Максим]

Tereverda, в symbol свой viewBox в svg свой

[Максим]

Tereverda, вы наверно не знаете что такое вьюбокс и не понимаете его значение

[Tereverda]

Максим, Спасибо, теперь разобрался, работает