Garden Gnome Software

Hi All,

I am having issues trying to get SVG images to adhere to an anchor point. I don't remember this particular issue being an issue in the previous version. I could be wrong, but I don't recall dealing with this.

Each svg that we import seems to have it's own container that it sits in.

https://youtu.be/6jQhiC0WgKE

It's extremely important to be able to lock the svg containers aspect ratio. This container does not appear to lock to the size of the actual svg graphic, which is an issue. The graphic itself could be 100 X 100 pixels and the container can be 100 X 1000 pixels and the graphic will sit directly in the middle of that container. The issue becomes apparent when you attempt to anchor the graphic because you are not anchoring the actual graphic itself, but instead you are actually anchoring the container that the graphic sits in.

From what I can tell, there is no way to anchor the image "within" the graphics container. This limits the ability to utilize SVG's for their inherent responsiveness effectively and creates a ton of additional work to get the result needed.

Being able to lock the aspect ratio of the SVG's container would completely eliminate this issue.

Maybe it's just me but I have found no way to lock the aspect ratio of the container. I understand that I can use logic blocks to do what I want and that I can use scaling as well. That is just a lot of extra work when simply using an anchor point with a lock aspect ratio option would force the browser to do all the calculations automatically.

Hi,
We keep the aspect ratio of the SVG hence why you are getting this behaviour when you use percentage with width and height.
If not then you would get very strange image distortion.

For an SVG or any other element that needs to keep the aspect ratio what you would do is use a logic block to change either the size or scale using player width OR height.
This way you can keep the correct size, example using three expressions:

player width, <=, 1025, AND
player width, >, 800, 40/40px

player width, <=, 800, AND
player width, >, 400, 30/30px

player width, <=, 400, 20/20px

This has been like this since version 5.

Regards,
Hopki

Hi Hopki,

I think that you have misunderstood what I have said.

It is not the graphic itself that represents the problem. It is the container that the graphic sits in that is the problem because it does not lock ITS aspect ratio to the actual graphic that it houses.

I created another video to try an better explain what I am talking about.

https://youtu.be/ej2wgW2wEbE

If I am not making myself clear enough, tell me and I will try again

Thanks.

Hi,

Just to clarify, and I'm sure you may already be aware of this ...

There are two elements in an SVG that affect it's appearance. The first is the ViewPort and the second is the ViewBox.

The ViewPort size determines how much you can see, but it doesn’t define the size of whatever might be visible through that viewport.

The container that you are referring to and the one that is visible in your video (the red one) is called the ViewBox.


You can see it if you open the SVG in a text editor and the code looks like this viewBox = <min-x> <min-y> <width> <height>. The first two numbers define the position of the viewBox the last two numbers define the dimensions of the viewBox.

If the ViewPort and the ViewBox dimensions don't match there is a command that determines the relationship of the two elements it's called 'preserveAspectRatio' You can find more information about it online. Unfortunately it refers to the display of the content within the SVG not the aspect ratios of the ViewPort or ViewBox.

As these are integral parts of the SVG it's probably better not to try and adjust them via Pano2VR but put them into a container that Pano2VR can interact with.

That said the nature of using percentages and the position/scaling of elements via percentages is based on the browser window. If you have positioned elements on a skin that is 1000 x 500 in size then as long as the browser window maintains a 2:1 ratio then the element scales and positions properly. However searching on how to force a browser window to maintain ratio hasn't been that fruitful.

Maybe by creating a html div that contains the SVG and fixing that to a set ratio and then integrating that through a text box may help. Just a thought.

cheers,

Tony

Hi,

Okay I've been having a play with the concept of putting the svg into the div. We can scale the div with a fixed ratio and if the SVG has 100% by 100% set in the ViewBox and ViewPort then it will work.

Here's an example. The black box is an SVG file https://s3-ap-southeast-2.amazonaws.com ... index.html

Tony

Okay a bit more playing and I've come up with this...

https://s3-ap-southeast-2.amazonaws.com ... index.html

The TV is an SVG file

Tony

Hi Tony!

Thanks for all the research you put into this! Your example is exactly what I am trying to accomplish! So you basically add a textbox to the skin, then add the html div with image to the textbox.

Would you mind sharing your code for the textbox to get the image to show correctly? I have been trying to get the image to appear but have been unsuccessful in ALL of my attempts over the last 24 hours.

At this point it is obvious to me that I have no idea what I am doing

Thanks Tony!

Hi,

Thanks for all the research you put into this!

It was an interesting challenge; if I was a bit more savvy with styling html it may have been more obvious.

Your example is exactly what I am trying to accomplish! So you basically add a textbox to the skin, then add the html div with image to the textbox.

Yes, I'm adding a textbox and then using an iFrame to load an .html page. Aside from creating and positioning the divs the trick is to include the SVG as code in the html rather than adding it via an img tag.

I've attached the includes file tvtest.html that contains the svg. The textbox uses the following code;
Note: there is a difference in the way Chrome and Firefox deal with the div when the window is quite small. Looking at it now.

cheers,

Tony

Hi Tony!

WOW! You went all the way on this one

Thanks so much for sharing your info here and for doing all the R&D.

How difficult would it be for the developers at Pano2vr to implement something like this into the platform? It just makes more sense to have the browser do all the aspect ratio calculations as opposed to using logic or scaling to get things looking the way they should on mobile devices.

I am using your solution now and will report back with my success

Thanks again Tony!!!