Как увеличить svg, чтобы адаптив не сказал пока?

Question

[Дуболом Одноклеточный]

У меня есть иконка, она изначально не маленькая, но если другой блок будет ее жать:

то она сразу уменьшается. Как ее увеличить до изначального размера, чтобы еще не вылезало за грани сетки?
Вот так нужно:

Comments

[WapSter]

Добавь ее фоном

Answer 1

[approximate solution]

Иконка явно "украшательного" характера и не несет никакой феноменальной смысловой нагрузки. Поэтому сделайте её background-image: contain. И ваша картинка будет уменьшаться пропорционально блоку.

Comments

[Дуболом Одноклеточный]

Теперь когда задал background-image картинки не видно

[WapSter]

Дуболом Одноклеточный, печально тебе

[approximate solution]

Дуболом Одноклеточный, https://www.w3schools.com/html/html_images_backgro...

[Дуболом Одноклеточный]

Я это все знаю, просто если не задавать картинке min-width и min-height, то ее вообще нет. А если задам, то потом в адаптиве уменьшаться не будет

[approximate solution]

Дуболом Одноклеточный, Вы не картинке задаете размер, а вашему адаптивному блоку. Картинка у вас идет contain или cover. Логично подумайте, нахрена картинке размер, если она - ФОН БЛОКА.

[Дуболом Одноклеточный]

Ну так я блоку задавал пробовал, тоже не работает

[approximate solution]

Дуболом Одноклеточный, кидайте на codepen ваш код, поправлю.

[Дуболом Одноклеточный]

У меня его на codepen нету

[Дуболом Одноклеточный]

Ща попробую

[approximate solution]

Дуболом Одноклеточный, Так залейте, раз уж ждёте помощи.

[Дуболом Одноклеточный]

Шаблон скину

[Дуболом Одноклеточный]

Держите:
https://codepen.io/duboloms/pen/JjYOpjG?editors=1000
Только если места не хватит включите в change view, debug mode или fullpage mode
Не смотрите что у меня некоторые пены фиговые в плане верстки, я их давно делал

[approximate solution]

Дуболом Одноклеточный, Пропишите по мимо flex-basis, к ico
height: 100vh(условно), изображение появится, и будет ужиматься когда вы будете уменьшать размер окна.

[Дуболом Одноклеточный]

approximate solution, Спасибо вам большое! Работает

Answer 2

[Арсений Матыцин]

SVG по своей сути и названию масштабируемая графика. При интеграции ее в тело документа ты указываешь ей фактические размеры (хотя бы для одного из брекпойнта). Если же интегрируешь с помощью object, то max-width:100%, таким образом SVG будет всегда вписана в область, которая ей отведена.

Следовательно, в конечном счете размер вектора зависит от родителя (если ты не накосячил, конечно).

Исходя из этого ты можешь абсолютно позиционировать родителя SVG таким образом, чтобы он занимал столько места от секции, сколько есть в макете. При этом, врядли тебе будет доступен z-index:-1, тогда тебе необходимо будет задать родителю SVG (или ей самой, если ты без родителя обошелся) z-index:0, а форме свойства position:relative;z-index:1;, чтобы она [форма] могла «лечь» поверх пикчи.

Фоном делать не рекомендую, так как в случае с SVG ты потеряешь возможность точно управлять ей.

А начать постигать дзен SVG можно отсюда.