Как плавно увеличить svg, на разной ширине экрана, до заданных значений?

Question

[MyQuestion]

Добрый день!

Я немного запутался, информации вроде достаточно, но пока не очень получается.
Задача такая:
Есть два состояния экрана на Mobile на 360px и desktop на 1100px.
У меня есть svg фон, который я хочу плавно масштабировать от одного состояния экрана до другого.
На мобилке svg 200х200 на ПК доходит до 400х400.
Вот примерное окружение с которым нужно работать:
https://jsfiddle.net/work_project/6shb9tna/

Изначально я брал svg размером 400х400 и уменьшал его ограничивающим контейнером в процентах. Контейнер позиционировал абсолютно. Вроде всё работало, но это слишком топорно. И в случае круга, один из его краёв получался слегка ломанным, например справа я видел еле заметную текстуру границы, срезающую дугу круга.

Я вроде видел различные типо подключать svg картинкой в html а в css width писать 100%. Но а если мне фоном нужно? Видел рекомендации убирать атрибуты width и height из svg и опираться на атрибут viewBox, но тут я не очень понял, как это работает. Я увеличивал значение viewBox и svg уменьшался. Но не особо был адаптивным. В общем не понимаю, что на что влияет.

Как сделать SVG адаптивным, и увеличивать либо уменьшать его фиксированный размер до заданных значений в зависимости от ширины вьюпорта?

Answer 1

[Ankhena]

Нужно прочитать про свойство background-size.
И да, убрать размеры из svg.

Comments

[MyQuestion]

Я действительно, не до конца понимаю это свойство и приёмы работы с ним.
Что я пробовал, когда был ограничивающий контейнер:
- contain: я добился нужного эффекта, но мне не нравится это решение из-за проблем описанных выше. И мне не хочется, что бы фон был жёстко зажат чем-то. Я хочу свободно перемещать этот фон внутри блока без ограничителей. Единственный ограничитель это ширина блока в котором фон свободно плавает и ширина окна
- cover: заполнит всё доступное пространство. B видимо обращает внимание только на ширину окна, по высоте он мой круг режет.
- Фиксированные значения: пока писал пост, попробовал подобрать процентные значения. Фон меняется, но я не могу его контролировать без брейкпойнтов. В принципе, решение меня устроило бы, немного кастомно, но если ничего лучшего нет, то можно и так.

Что ещё я могу сделать? Есть возможность на экране в 320px получить фон размером в 200px, а на 1100px получить фон размером в 400px, плавно изменяя его? Ну что-то вроде двух точек минимальной и максимальной ширины.

[Ankhena]

cover: заполнит всё доступное пространство. B видимо обращает внимание только на ширину окна , по высоте он мой круг режет.

Ничего подобного. Если ширина меньше высоты, то обрежет наоборот.

- Фиксированные значения: пока писал пост, попробовал подобрать процентные значения. Фон меняется, но я не могу его контролировать без брейкпойнтов. В принципе, решение меня устроило бы, немного кастомно, но если ничего лучшего нет, то можно и так.

Немного что??

Я хочу свободно перемещать этот фон внутри блока без ограничителей.

Думаю, что сначала нужно на бумажке нарисовать как именно вы хотите его свободно перемещать и от чего это зависит.
За позиционирование фона отвечает background-position.

[MyQuestion]

Ankhena,

Ничего подобного. Если ширина меньше высоты, то обрежет наоборот.

Да.

Немного что??

Немного, переусложнено, неоправданно. Если смотреть в контексте, то я говорю о доп контейнерах, и свойствах, которые усложняют восприятие кода и мешают нормальному понимаю того, как это работает. В общем налепил, не разберёшься.

Думаю, что сначала нужно на бумажке нарисовать как именно вы хотите его свободно перемещать и от чего это зависит.
За позиционирование фона отвечает background-position.

Я вчера после моего комментария, всё и сделал. Всё работает хорошо. Всё перемещается.
Но опять же, если смотреть в тот же комментарий, основной вопрос, который меня интересует это альтернативные решения. В частности, я хотел узнать, нет ли возможности задать стартовые 200 пикселей изображению на минимальной ширине окна и конечные 400 пикселей на максимальной ширине. И плавно изменять этот размер в зависимости, от ширины окна по мере приближения от одной крайней точки к другой.

Ну нет так нет. Наверное это к JS.

[Ankhena]

MyQuestion, есть clamp, правда не пробовала применять его к bg size. Но всяко можно применить к псевдоэлементу. Если устраивает поддержка.
Для псевдо так же есть мин и макс ширина и высота.

В любом из случаев есть media и размеры в процентах.

[MyQuestion]

Ankhena, спасибо )

В любом из случаев есть media и размеры в процентах.

Так и сделал )