How do I scale a group/symbol containing SVG objects?

Getting Started
1

Hi! It’s my first day on board and I have to say I’m pretty excited with Hype!
Still, I’m trying to resize a group of SVG (imported) objects and I can’t seem to find how to make them scale with the Group container!

I use the following svg object (initially I was trying to get more complex objects to scale but I couldn’t so I reverted to this minimal one) - say box.svg:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" height="100%" width="100%"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

I’ve tried the width and height both as “100%” and “100” but I couldn’t get it to work.

Workflow

I add a few instances of box.svg to a new scene. I Group them together and try resizing the group by the handles. The bounding box resizes, but not the boxes!
I’ve tried playing with the Pins&Sizing panel (Constraints) but it doesn’t seem to work (at least not the way I expect it to)

Same happens if instead of Group, I convert them to a Symbol!

I would be grateful if somebody could point me to the right direction; I know I’m missing something!

-Fotis

2

You need to use the “viewbox” attribute. This sets the aspect ratio. You can then scale from this.

<svg ... viewbox="0 0 100 50">

Some reading to help you perhaps understand:

1 Like
3

If you hold down the command key while you drag a corner it will scale the elements if they are in a group.

4

Thank you both @DBear and @Daniel for the help!

@DBear, a very nice read indeed! I tried using the viewbox attribute, but it didn’t make any difference; What I mean is that with (or without) viewbox the svg image does scale - It’s the group of SVGs that won’t!. viewbox also didn’t seem to affect the bounding box of the shape - Could it be that Hype completely ignores the attribute?

@Daniel’s reply totally nailed! Cmd+dragging does the trick in resizing the contents for both groups and symbols!!! so nice!

Thank you both again!!
-Fotis

2 Likes