Как плавно увеличить 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 адаптивным, и увеличивать либо уменьшать его фиксированный размер до заданных значений в зависимости от ширины вьюпорта? 

 Нужно прочитать про свойство background-size.  

И да, убрать размеры из svg.