view port - preserve aspect radio

initial user coordinate system


			SVG viewPort
			
				width: 300
				height: 300

view port coordinate system equals user coordinate system

viewBox can be smaller than viewPort


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 0
				minY: 0
				width: 150
				height: 150
			
			
				The region is scaled up (in a zoom-in-like effect) to fill the entire viewport
				user coordinate system is mapped to the viewport coordinate system

viewBox can be bigger than viewPort


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 0
				minY: 0
				width: 450
				height: 450

viewBox can be fully or partially visible


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 50
				minY: 50
				width: 300
				height: 300

viewBox can be fully or partially visible


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: -50
				minY: -50
				width: 300
				height: 300

viewBox

any descendant of the svg will be positioned and sized in the new user coordinate system


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 0
				minY: 0
				width: 300
				height: 300


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 0
				minY: 0
				width: 600
				height: 600

viewPort width, height represents the user coordinate system before viewBox transformation is applied
1 unit in the user coordiante system equal 0.5 units in the viewPort coordinate system

viewPort width / viewBox width
viewPort height / viewBox height

The preserveAspectRatio attribute

`preserveAspectRatio=defer? align meetOrSlice?`


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 0
				minY: 0
				width: 100
				height: 300

by default it preserves aspect ratio


			SVG viewPort
			
				width: 300
				height: 300
			
			SVG viewBox
			
				minX: 0
				minY: 0
				width: 100
				height: 300

preserveAspectRatio="none"

if is set to none the graphic will be scaled inside the viewPort without mantaining the aspect ratio

Transform

the element’s new current coordinate system is transformed by the transformation functions specified inside the transform attribute


			SVG viewPort
			
				width: 300
				height: 300
			
			rec 1
			
				width: 100
				height: 100
				x: 100
				y: 100
				transform:translate(-50 -50)
			
			rec 2
			
				width: 100
				height: 100
				x: 100
				y: 100
			
			rec 3
			
				width: 100
				height: 100
				x: 100
				y: 100
				transform:translate(100 100)

Scale

The scaled SVG’s element’s position changes inside the viewport when it is scaled


			SVG viewPort
			
				width: 300
				height: 300
			
			rec 1
			
				width: 300
				height: 300
				x: 100
				y: 100
				transform:scale(0.25)
			
			rec 2
			
				width: 300
				height: 300
				x: 100
				y: 100
				transform:scale(0.5)
			
			rec 3
			
				width: 300
				height: 300
				x: 100
				y: 100

SVG studies

initial user coordinate system

SVG viewPort

using the viewBox attr user coordinate system can be modified

viewBox can be smaller than viewPort

SVG viewPort

SVG viewBox

viewBox can be bigger than viewPort

SVG viewPort

SVG viewBox

viewBox can be fully or partially visible

SVG viewPort

SVG viewBox

viewBox can be fully or partially visible

SVG viewPort

SVG viewBox

viewBox

SVG viewPort

SVG viewBox

SVG viewPort

SVG viewBox

The preserveAspectRatio attribute

`preserveAspectRatio=defer? align meetOrSlice?`

SVG viewPort

SVG viewBox

SVG viewPort

SVG viewBox

Transform

the element’s new current coordinate system is transformed by the transformation functions specified inside the transform attribute

SVG viewPort

rec 1

rec 2

rec 3

Scale

The scaled SVG’s element’s position changes inside the viewport when it is scaled

SVG viewPort

rec 1

rec 2

rec 3