3.1 The Viewport -3.2 Default User Coordinates and Units of length
3.1 The Viewport
The area of the canvas that your document intends to use is called the viewport.
You establish the size of this viewport with the width and height
attributes on the <svg> element, for example
<svg width="200" height="100">
3.2 Default User Coordinates
The values of these attributes can be simply a number
which is presumed to be in pixels;
However the user can add unit identifiers, for example
<svg width="7cm" height="5cm">
Below is the list of available the unit identifiers:
em
ex
px
pt
pc
cm
mm
in
3.3.1 Specyfing the user Coordinates in viewBox with the same aspect ratio as in a vieport
Aspect ratio the same for width and height 4, 5 and 4⋅16 = 64, 5⋅16 = 80.
<svg width="4cm" height="5cm" viewBox="0 0 64 80">
<rect x="0" y="0" width="100%" height="100%" stroke="#aaa" stroke-width="0.5" fill="none"/>
<rect x="0" y="0" width="16" height="16" fill="orange"/>
<rect x="48" y="64" width="1cm" height="1cm" fill="purple"/>
</svg>3.3.2 Specyfing the user Coordinates in a viewBox with aspect ratio different from the vieport
Default behaviour
3.4. Preserving aspect ratio
Specifying Alignment for preserveAspectRatio using preserveAspectRatio="alignment [meet | slice | none]"
3.4.1 Preserving aspect ratio with meet Specifier
preserveAspectRatio="xMinYMin meet"
preserveAspectRatio="xMinYMin meet"
preserveAspectRatio="xMinYMin meet"
preserveAspectRatio="xMinYMin meet"
preserveAspectRatio="xMinYMin meet"
preserveAspectRatio="xMinYMin meet"
3.4.2 Preserving aspect ratio with slice Specifier
preserveAspectRatio="xMinYMin slice"
preserveAspectRatio="xMidYMid slice"
preserveAspectRatio="xMaxYMax slice"
preserveAspectRatio="xMinYMin slice"
preserveAspectRatio="xMidYMid slice"
preserveAspectRatio="xMaxYMax slice"
3.4.3 Using the none Specifier
preserveAspectRatio="none"
preserveAspectRatio="none"