How to smoothly increase svg, at different screen widths, to given values?

Question

css

Good afternoon!

I'm a little confused, there seems to be enough information, but so far it's not very successful.
The task is this:
There are two screen states on Mobile at 360px and desktop at 1100px.
I have an svg background that I want to seamlessly scale from one screen state to another.
On a mobile phone, svg 200x200 on a PC goes up to 400x400.
Here is an example environment to work with:
https://jsfiddle.net/work_project/6shb9tna/

Initially, I took a 400x400 svg and reduced it with a bounding container in percent. The container is positioned absolutely. Everything seems to work, but it's too clumsy. And in the case of a circle, one of its edges turned out to be slightly broken, for example, on the right, I saw a barely noticeable border texture that cuts off the arc of the circle.

I kind of saw various types of connecting svg with a picture in html and writing 100% in css width. But what if I need a background? I saw recommendations to remove the width and height attributes from svg and rely on the viewBox attribute, but here I didn’t quite understand how it works. I increased the value of the viewBox and the svg decreased. But not very adaptable. In general, I do not understand what affects what.

How to make SVG responsive, and increase or decrease its fixed size to given values ​​depending on the width of the viewport?

Answer 1

You need to read about the background-size property.
And yes, remove dimensions from svg.