I have an SVG that I want to fit in a smaller box, while preserving all ratios. I'm trying to do this by nesting the SVG inside another SVG with smaller width/height and viewbox numbers, but instead of resizing, the image is getting cut out.
I've tried nesting the original SVG inside another SVG with different viewbox numbers.
Original SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.0" width="2060.0" height="1340.0" xml:space="preserve" viewBox="0.0 0.0 2060.0 1340.0">
<!-- The artwork image. -->
<image dragTarget="true" scaleTarget="true" dragConstraint="canvas-front-rect" scaleConstraint="canvas-front-rect" id="artwork-image" x="5" y="-100.0" width="2400" height="1500"
preserveAspectRatio="xMidYMid slice" xlink:href="https://www.printbit.com/wp-content/uploads/2017/06/happy-people.jpg" />
<!-- The "sides" -->
<g transform="scale(1, -1) translate(0, -140)" >
<use clip-path="url(#clip-path-top)" xlink:href="#artwork-image" />
</g>
<g transform="scale(1, -1) translate(0, -2540)" >
<use clip-path="url(#clip-path-bottom)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-140, 0)" >
<use clip-path="url(#clip-path-left)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-3980, 0)" >
<use clip-path="url(#clip-path-right)" xlink:href="#artwork-image" />
</g>
<!-- Constraint information -->
<rect id="canvas-front-rect" constraint="gte" x="70.0" y="70.0" width="1920.0" height="1200.0" stroke-width="1" stroke="#0000FF" fill="none" visibility="visible" />
<!-- Clip path definitions for the mirroring -->
<defs>
<clipPath id="clip-path-top"> <rect x="70.0" y="70.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-bottom"> <rect x="70.0" y="1200.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-left"> <rect x="70.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-right"> <rect x="1920.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/></clipPath>
</defs>
</svg>and I'm trying to nest this inside of
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0.0"
y="0.0"
width="492.16"
height="406.83"
xml:space="preserve"
viewBox="0.0 0.0 492.16 406.83"
></svg>
Expected Result: I want the original SVG to show up as a smaller version of itself, with all ratios preserved. Actual: However, instead of just resizing, the image gets cut out.
