База по SVG width/height - рамка, реальный размер на экране. viewbox - это холст, вписанный в эту рамку. Он может быть больше или меньше рамки. preserveAspectRatio - как именно впихнуть невпихуемое
meet - Браузер уменьшит твой квадрат так, чтобы он полностью влез в узкую рамку. По бокам останутся пустые места. slice - Браузер растянет квадрат так, чтобы заполнить всю рамку. Но тогда верх и низ твоего квадрата обрежутся. none: Браузер просто сплющит твой квадрат в прямоугольник. Круг на рисунке станет овалом.
align - говорит браузеру, к какому краю «прижать» картинку, если остались пустые поля.
X (горизонталь): xMin — прижать к левому краю. xMid — выровнять по центру. xMax — прижать к правому краю.
Y (вертикаль): YMin — прижать к верхнему краю. YMid — выровнять по центру. YMax — прижать к нижнему краю.
Поэксперементировать: https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/
