У меня есть SVG в макете. В проекте используются Vue.js и начальная загрузка 4.
Рабочий пример : https://codesandbox.io/embed/vue-template-7s5cv
SVG масштабируется в соответствии с шириной доступного пространства в правом столбце.
Проблема: Я хочу, чтобы SVG всегда показывался целиком, чтобы не выходить за пределы экрана снизу, если, например, доступный экран намного шире, чем высокий.
Пример : 
Цель : Вместо этого SVG следует уменьшить, чтобы он соответствовал доступному экрану, ориентированному вцентр родительского дел. SVG не должен перекрывать доступное пространство внизу.
Возможно ли это и если да, то как?
Рабочий пример с тем же кодом и кодом коробки будет очень полезен.
Спасибо за помощь!