Simple example for viewBox="tx ty w2 h2" and retransforming it

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="-8 -8 16 16" fill="none">

<path stroke="black" stroke-width="1" d="m-7,0h14M0-7v14"/>
<circle stroke="red" stroke-width="1" r="7"/>
<path stroke="blue" stroke-width="16" d="m0,0h256v256H0z" transform="translate(-8 -8)scale(.0625)"/>

</svg>

The transformation can as well be coded by the matrix 
  transform="matrix(.0625 0 0 .0625 -8 -8)"

Explanation

The real size (w₁ × h₁) is 256 × 256, the viewBox sets it to (w₂ × h₂) 16 × 16 with a translation t_x = -8 and t_y = -8.
In this system a black cross and a red circle are drawn.

By the transform="translate(tx ty)scale(w2/w1 h2/h1)" the real size 256 × 256 is temporary restored.
From the blue square only half of the stroke-width is visible, the other half is outside of the visible area.