Page 1 of 1

Proper Scaling For Multiple SVG Images?

Posted: Wed Dec 12, 2018 11:45 am
by 1uv3
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!

Re: Proper Scaling For Multiple SVG Images?

Posted: Wed Dec 12, 2018 5:22 pm
by Hopki
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

Re: Proper Scaling For Multiple SVG Images?

Posted: Wed Dec 12, 2018 8:42 pm
by 1uv3
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!!!