@MyQuestion
Начинающий Frontend

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

Добрый день!

Я немного запутался, информации вроде достаточно, но пока не очень получается.
Задача такая:
Есть два состояния экрана на 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 адаптивным, и увеличивать либо уменьшать его фиксированный размер до заданных значений в зависимости от ширины вьюпорта?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Нужно прочитать про свойство background-size.
И да, убрать размеры из svg.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы