Search code examples
csssvgresponsiveresponsive-images

Responsive spacing in SVG group?

I've got a SVG exported from Adobe XD, it is a collection of five "cards" showing some people's faces arranged in a particular pattern. Here is how the code is structured:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="430" viewBox="0 0 700 430">
  <defs>
  ...
  </defs>
  <g id="USERS" clip-path="url(#clip-USERS)">
    <g id="Group" transform="translate(-793.227 -295.708)">
      <g id="User_5" data-name="User 5" transform="translate(1340.921 326.103) rotate(-14)">
      ...
      </g>
      <g id="User_4" data-name="User 4" transform="translate(1052.907 570.449) rotate(16.024)">
      ...
      </g>
      <g id="User_3" data-name="User 3" transform="translate(1170.434 426.218) rotate(-14)">
      ...
      </g>
      <g id="User_2" data-name="User 2" transform="translate(984.139 426.348) rotate(-14)">
      ...
      </g>
      <g id="User_1" data-name="User 1" transform="translate(827.868 347.168) rotate(16.024)">
      ...
      </g>
    </g>
  </g>
</svg>

I need to place the image on a website which has a responsive background, and I am trying to make the size of the image responsive as well.

With Adobe XD, I can resize the group without changing the aspect ratio of the cards - that is, only the space between them is affected. I am trying to achieve the same with the SVG on my website.

Here is a GIF of what I'd like to obtain specifically:

responsive resize

So far, I've tried substituting width="700" height="430" with width="100%" height="auto" in the SVG header, maybe even adding preserveAspectRatio="none", but that affects the entire image, not only the space between objects.

Any help?

Solution

  • What you want is not possible just by messing with viewBox and preserveAspectRatio. Anything inside the SVG will be scaled along with the SVG itself.

    You would need to use Javascript, then either:

    • Don't use viewBox and instead reposition the cards yourself according to the current width and height, or
    • Let SVG reposition and scale them (using viewBox etc) , and then apply the inverse scaling transform to each card to counteract the scaling that SVG applied.

    Alternatively, make each card a separate SVG image and use CSS to position them relative to the parent width and height.