SVG viewBox: Exact order of translation and scaling

Question

I am struggling to understand exactly how min-x and min-y on viewBox works, from a technical standpoint (without metaphors).

T

Answer 1

1. In the picture, a gray rectangle is an infinite SVG canvas.

2. The green rectangle is the viewport that the user sees on its display.

3. The yellow rectangle is the virtual viewBox area through which the user looks at the viewport.

viewBox can move along the coordinate axes of the infinitesvg canvas as in the positive direction x-min> 0; y-min> 0 and in the negative direction-x-min; -y-min

Image processing svg

• Next comes the capture of a fragment of the SVG canvas, located under the viewBox.
• In the next step, the coordinate system of the viewBox is aligned with the origin of the coordinate system of the viewport. And the fragment captured by the viewBox image is passed back to the viewport.

• There is a process of negotiation and options are possible here:

  1. If min-x = 0 andmin-y = 0, the width and height of the viewports are equal, respectively, to the width and height ofviewBoxs, then the fragment image does not move or scale.
  2. If the viewBox is shifted to the right - min-x> 0, the image is shifted to the left. It is clear that by capturing an image to the right of the viewport and then combining it with the origin, we thereby shift the image to the left.
  3. If the viewBox is shifted below the viewports - min-y> 0, the image will go up.

Based on this, there are thoughts that you can implement horizontal and vertical parallax without using CSS,JavaScript. To do this, simply move the viewBox along the SVG canvas, as shown in the figure below. Click the Start button.

<svg version="1.1"   xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
   width="600" height="360" viewBox="0 0 600 360"   >
  <title> Explanation horizontal of parallax viewBox </title>
  <desc> animate the horizontal parallax  by modifying a coordinate of the viewBox </desc>
 <defs>
<g id="canvas-svg" stroke-width="2px">	
  <g id="canvas-frame1">
   <rect id="v-port1" x="25" y="200" width="110" height="110" stroke="skyblue"   fill="yellowgreen" /> 
	<text id="t-port1" x="75" y="255" style="font-size: 16pt;">1 </text>
	<text  x="26" y="303" > 0 </text>
 </g>		    
  <g id="canvas-frame2">		
		<rect id="v-port2" x="135" y="200" width="110" height="110" stroke="skyblue"  fill="dodgerblue" /> 
		<text id="t-port2" x="185" y="255" style="font-size: 16pt;">2 </text>
		<text  x="136" y="303" > 1168 </text>
 </g>		  
  <g id="canvas-frame3">		
		<rect id="v-port3" x="245" y="200" width="110" height="110" stroke="skyblue"  fill="crimson"  /> 
		<text id="t-port3" x="295" y="255" style="font-size: 16pt;">3 </text>
		<text  x="246" y="303" > 2336 </text>
  </g>
      <g id="canvas-frame4">		
		<rect id="v-port4" x="355" y="200" width="110" height="110" stroke="skyblue"  fill="orange" /> 
		<text id="t-port4" x="405" y="255" style="font-size: 16pt;">4 </text>
		<text  x="356" y="303" > 3504 </text>
     </g>
       <g id="canvas-frame5">		
		<rect id="v-port5" x="465" y="200" width="110" height="110" stroke="skyblue" stroke-width="1px" fill="yellow" /> 
		<text id="t-port5" x="515" y="255" style="font-size: 16pt;">5 </text>
		<text  x="466" y="303" > 4672 </text>
       </g>   
 </g>
	
 </defs>
 
  <g id="first-rect">
   <rect  x="25" y="25" width="110" height="110" stroke="skyblue" stroke-width="1px" fill="yellowgreen" /> 
	<text  x="75" y="85" style="font-size: 16pt;">1 </text>
	<text  x="26" y="135" > 0 </text>
 </g>		    


  <desc>The SVG canvas is infinite in size. In our example, user a viewport of SVG is in the leftmost position.</desc>  
<use xlink:href ="#canvas-svg" x="0" y="0"> </use>
  	
<desc> viewBox is moved along canvas SVG</desc>
 <g id="viewBox1">
 <rect id="v-box" x="25" y="200" width="110" height="110" stroke="skyblue" stroke-width="5px" fill="none" />
	 <text id="t-port1" x="45" y="225" style="font-size: 16pt; fill:blue;">viewBox </text>   
	<animateTransform attributeName="transform" type="translate" begin="startButton.click+0.5s" end="stopButton.click" dur="20s" from="0 0" to="440 0" repeatCount="indefinite" restart="whenNotActive" fill="freeze"/>
 </g>	
 

<desc> The image moves to the left viewport</desc>
<use xlink:href ="#canvas-svg" x="0" y="0">
    <animateTransform attributeName="transform" type="translate" begin="startButton.click+0.5s" end="stopButton.click" dur="20s" from="0 -170" to="-440 -170" repeatCount="indefinite" restart="whenNotActive" fill="freeze" />
  </use>

<desc> Grey background image of the canvas SVG</desc>
 <g fill="#E5E5E5" stroke="#E5E5E5">
 <rect  x="135" y="0" width="465" height="195"    />   
  <rect  x="0" y="0" width="25" height="195"    />   
  <rect  x="0" y="0" width="135" height="30"    />   
  <rect  x="25" y="135" width="135" height="60" />   
  <rect  x="0" y="315" width="600" height="85"  />   
  <rect  x="0" y="195" width="25" height="120"  />
  <rect  x="575" y="195" width="25" height="120" />
 </g> 
  
  <g stroke-width="1px" stroke-dasharray = "5 5"> 
  	<line x1="25" y1="140" x2="25" y2="195" stroke="blue"  />
 <line x1="135" y1="140" x2="135" y2="195" stroke="blue" stroke-width="1px"  />
  </g>		
   <g style="font-size: 16pt; fill:blue;">
	<text  x="45" y="170"  > viewport </text> 
	 <text  x="15" y="20" style="font-size: 14pt;"> display the user's  </text>
	    <text  x="230" y="90" style="font-size: 40pt; fill:#1E90FF"> canvas SVG </text> 
   </g> 

<g id="startButton">
	<rect  x="520" y="325" rx="8" ry="8" width="60" height="20" fill="#58AE2A" />
	<text  x="550" y="340" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" 
	fill="white" >Start</text>
</g>
        <g id="stopButton">
			<rect  x="450" y="325" rx="8" ry="8" width="60" height="20" fill="#1E90FF" />
			<text  x="480" y="340" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle" 
			fill="white" >Stop</text>
		</g>	

</svg>

Answer 2

I always mix up viewBox and viewport. So I'll try to avoid it where possible. And I don't fully understand if you want to setup the transformation matrix for the browser or for SVG. So I'll try to avoid it as well.

The viewBox attribute provides information to your browser about the size and the coordinate origin of your SVG graphics. It defines the window into the SVG. Only parts within the window will be visible.

So let's look at an example:

<svg width="800" height="600" viewbox="100 100 200 150">

This tells the browser that it should draw an SVG graphics that will have the dimension 800px by 600px – in the browser's coordinate system. So within the browser DOM, the SVG component will have that size.

The viewbox attribute then tells the browser that the relevant/visible part of the SVG graphics is 200pt by 150pt in size (in the SVG coordinate system). So the browser knows that it will need to apply a scaling of 400% to convert SVG coordinates to browser coordinates.

Furthermore, the viewbox attribute tells the browser that the point (100, 100) in the SVG coordinate system will be the top left corner of the visible SVG graphics window. So the browser will translate it accordingly.

Everything with smaller x and y values in the SVG coordinate system will be clipped, i.e. not visible, as it's outside the windows and outside the space the browser has created for the SVG. Similarly, everything to the right of the SVG coordinate 300 (100 + 200) and below the coordinate 250 (100 + 150) will be outside the window and not visible.

Answer 3

The offset of the origin of the coordinates viewBox on the x-axis (min-x=70px)

<svg width="400" height="400" viewBox="70px, 0, 400px, 400px">

In the figure, the origin of user coordinates shifts to the right by 70px, thereby shifting the entire rectangular viewing areaviewBox (400 x 400px)to the right along the horizontal axis.

When this happens, the image of the SVG document fragment that is under the viewBox is captured and then the viewBox viewing area with the captured fragment is back aligned with the fixed user viewport area with the origin (0,0) in the upper left corner.

The coordinates of the figures are recalculated with the last shift of 70px to the left. Formally it turns out that in the fixed viewing area of the viewport when applying the viewBox the fragment of the SVG document has shifted to the left.

Live Demo

The offset of the origin of the viewBox along two axes

min-x=70px, min-y="70px"

<svg width="400" height="400" viewBox="70px, 70px, 400px, 400px">

For clarity, add another red rectangle at the bottom of the picture - 6

After transferring the origin to the viewBox, a rectangular 400 × 400 px SVG document fragment with a width and height count from the origin (70.70) gets into the viewBox.

Image capture occurs. Next, the origin of the viewBox (70,70) is combined with the origin of the viewport (0,0). The coordinates of the figures are recalculated.

Therefore, red rectangles 5 and 6 become fully visible. Everything that does not fall into this area is cut off. For example, part of the areas of colored circles 1,2 and 4.

Live Demo

Zoom using viewBox

The scale of the SVG document fragment depends on the aspect ratio: viewport andviewBox

If viewport /viewBox = 1, then the scale will be 1

If viewport /viewBox different from one, the scale will change in the direction of increase or decrease.

How does the increase in scale explains the figure below

One pixel viewBox stretches to two pixelsviewport

Live Demo

Zoom out svg image 1: 2

<svg width="400" height="400" version="1.1" viewBox="0 0 800 800">

viewport / viewBox = 1/2

The viewBox captures a rectangular fragment 800 x 800 px, that is, the entire scope of the SVG viewport 400 x 400 px and an additional 400px each on the right and bottom of the viewport.

That is two pixels of the viewBox are compressed into one pixel of the viewport. Therefore the SVG image is reduced by half.

Live Demo