SVG ViewBox (partly) Demystified

XVG current UI

Many people have trouble grasping the intricacies and difference between a viewport and a viewbox in SVG.

It didn’t really “click” with me, either, untill I start working on XVG (see above), an SVG-centric SPA that I’m building on COVID-enforced SAH time.

The dotted circles and rectangles you see are what I call in XVG “canonical shapes.”  These are ready-made graphical elements that are useful in the construction of geometric designs.  Sort of like scaffolding.

The big white surface you see is the SVG viewport.  It measures 600 x 708 units.

That is the size that I am allocatig to display the patterns that end users will design in.

The twist is, these patterns are actually displayed in what is known as an SVG “viewbox.”

This viewbox measures 300 x 354 units.

The viewbox act as a kind of telescope or magnifier for the design surface (ie, the viewport).  The smaller the viewbox, the bigger the image.

In this case, I set it up so that each user unit in the viewbox is exactly twice the value of a user unit in the viewport.

In effect, I am magnifying the shapes by a factor of 2.

As you can from the screenshot above, a shape will not display outside the perimeter of the viewport, which is bordered by the larger dotted rectangle.

The question arises, what is this white ribbon that surrounds the viewport?

I made viewport and viewbox equal in terms of user units, and it was still there. So it wasn’t that.

Viewport container sized to viewbox

I then surmised that this had something to do with PreserveAspectRatio, but could not verify it. I fiddled round with various values for that attribute, yet the white ribbon remained unmoved.

For now, I will posit a theory that SVG pads the outer edge of a viewport.  I cannot find any mention of this in the user documentation, nor can I see a padding attribute in the debugger.

Somehow this theory feels wrong, but I will move on and let it rest for now.

The important thing is that XVG looks (to me, at least) attractive the way it is, and I am getting correct SVG coordinate measurements for the position of the shape elements inside the viewbox — what matters to me at the moment.

What sucks is that fullscreen work on FF but export only works on Blink engines

Outside the viewport, we enter the realm of negative x y values, but I am not going to worry about it at the moment — particularly as everything looks fine in fullscreen (though odd that the 2 horizontal circles outside the viewbox appear, but not the vertical ones.  Really have to study the spec to resolve this — unless of course it is a browser thing).

This will change if down the road this “white ribbon” impacts tesselation.