Proper Scaling For Multiple SVG Images?

Q&A about the latest versions
Post Reply
User avatar
TheRealMojoJojo
Posts: 341
Joined: Thu Sep 20, 2018 10:18 pm

Hi All,

Anyone know the secret to getting multiple svg's that are placed within a container to properly scale up or down depending on the browser size? I know that this can be done with logic blocks. I am wondering if there is a technique that can be used to get all of the images to scale while still keeping their spacing with each other.

In the below example in the first image there are 4 squares. This is how I want them to look. However when I resize the browser as shown in the bottom image, then things get funky.

I will be adding a lot more squares to that little issue :-)

Anyone have any suggestions? Thanks!
Attachments
scaling.jpg
scaling.jpg (488.43 KiB) Viewed 1269 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
If you put all the buttons in a container then used a logic block to scale the container, then it will all scale proportionally.
So only scale the parent container.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
TheRealMojoJojo
Posts: 341
Joined: Thu Sep 20, 2018 10:18 pm

Hi Hopki,

I must be either over or under thinking this.

What do I set the settings to for the position and size of the container? Do I use pixels or percentages? Also, what exactly do I need to set in the logic block to get a smooth scaling as the window itself is being scaled? Is it the player width and height or aspect ratio?

It was easy to get the ONE image on the left to scale proportionately. I just set the container width to 50% and the height to 100%. I am a bit confused on what to set the buttons to to get the same effect.

Do you have an example I can follow?

Thanks Hopki!

UPDATE -

I got it :-) Thanks so much for the tip Hopki!!!
Post Reply