Size and aspect ratio

The SVG coordinate system

An important aspect is getting a grasp of the coordinate system to which the SVG will be mapped. This workspace is defined into the SVG element by the dimensions of the viewport and the viewBox.

viewBox

The viewBox mapped the internal boundaries associated with the SVG element. It's defined with four values: min-x, min-y, width, and height. The min- values represent at what point within the image reference coordination should start, while the width and height establish the reference box's size.

All position and size measurements of the nested elements use these dimensions as a reference, regardless of the SVG size.

viewport

The SVG dimensions is set through .height() and .width() into the svg element. If these values are not defined, the SVG dimensions will be determined by the container width, and work as .width('100%').

If the viewport maintains the same viewBox width and height ratio, the image is resized without deformation. If the viewport changes the ratio, the .preserveAspectRatio() method defines how to display the SVG content.

Scale

You can define the SVG size with .height() and .width(), or the equivalent CSS properties. The SVG can be scaled without limitations, to reduce and increase it.

This is the base image:

const svg = gySVG ().style.border ('1px dashed grey').viewBox (0, 0, 100, 100);
svg.add ('line').stroke_width (1).stroke_dasharray (18.5, 2).stroke ('grey')
  .x1 (0).y1 (0).x2 (100).y2 (100);
svg.add ('line').stroke_width (1).stroke_dasharray (18.5, 2).stroke ('grey')
  .x1 (100).y1 (0).x2 (0).y2 (100);
svg.attachTo('#example');

<svg viewBox="0,0,100,100" style="border: 1px dashed grey;" with="100" height="100">
    <line stroke-width="1" stroke-dasharray="18.5,2" stroke="grey" x1="0" y1="0" x2="100" y2="100"></line>
    <line stroke-width="1" stroke-dasharray="18.5,2" stroke="grey" x1="100" y1="0" x2="0" y2="100"></line>
</svg>

These are the same SVG with different .width() and .height() configuration:

.viewBox(0,0,100,100) .width(125).height(125)	.viewBox(0,0,100,100) .width(100).height(100)	.viewBox(0,0,100,100) .width(75).height(75)

Aspect Ratio

Non Defined

If you don't configure a .preserveAspectRatio() and the width defined with width() has a higher ratio than the one specified in the viewBox, then the SVG will be wider, and its content will be centered. If the height defined with .height() has a greater proportion than that defined in the viewBox, then the SVG will be taller, and its content will be displayed centered vertically.

With different configurations of .width() and .height() ratio, and without .preserveAspectRatio() configuration, these are the results:

.viewBox(0,0,100,100) .width(100).height(100)	.viewBox(0,0,100,100) .width(150).height(100)	.viewBox(0,0,100,100) .width(100).height(150)

When the aspect ratio is the same as the original, the image looks perfectly. If the ratio is different, the SVG edge it changed, and the content is centered, keeping the current aspect.

Non-uniform scaling

When the .preserveAspectRatio() is set to none, the SVG size is changed, and the content is deformed to occupy the new SVG edge.

With different configurations of .width() and .height() ratio, and without .preserveAspectRatio() configure as none, these are the results:

.viewBox(0,0,100,100) .width(100).height(100) .preserveAspectRatio('none')	.viewBox(0,0,100,100) .width(150).height(100) .preserveAspectRatio('none')	.viewBox(0,0,100,100) .width(100).height(150) .preserveAspectRatio('none')

Uniform scaling

For forcing uniform scaling, the .preserveAspectRatio() method accept a parameter with two values (separated by space): <align> and meet|slice. The first value takes two parts and directs the viewBox's alignment within the viewport:

• xMin - Align the min-x of the element's viewBox with the smallest X value of the viewport.

• xMid - Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.

• xMax - Align the min-x + width of the element's viewBox with the viewport's maximum X value.

• YMin - Align the min-y of the element's viewBox with the smallest Y value of the viewport.

• YMid - Align the midpoint Y value of the element's viewBox with the midpoint Y value of the viewport.

• YMax - Align the min-y + height of the element's viewBox with the viewport's maximum Y value.

The second value indicates how the aspect ratio is to be preserved:

• meet (by default) - the entire viewBox is visible within the viewport; thus, the area in which the viewBox will be drawn will be smaller than the viewport.

• slice - the viewBox covers the entire viewport; thus, the area in which the viewBox will be drawn will be larger than the viewport.

The combination of these parts define the aspect ratio behavior in different situations between the viewport and viewBox:

.viewBox(0,0,100,100) .width(150).height(100) .preserveAspectRatio(
'xMinYMin meet')	'xMidYMin meet')	'xMaxYMin meet')
.viewBox(0,0,100,100) .width(100).height(150) .preserveAspectRatio(
'xMinYMin meet')	'xMinYMid meet')	'xMinYMax meet')
.viewBox(0,0,100,100) .width(150).height(100) .preserveAspectRatio (
'xMinYMin slice')	'xMinYMid slice')	'xMinYMax slice')
.viewBox(0,0,100,100) .width(100).height(150) .preserveAspectRatio(
'xMinYMin slice')	'xMidYMin slice')	'xMaxYMin slice')