Q:

¿Como funciona viewbox en SVG? 

Introduciéndome en svg me encontré con el atributo viewbox pero no se que hace exactamente

<svg width="500" height="500" viewbox="0 0 50 100" style="background-color: blue" >
      <rect x="0" 
            y="0" 
            width="50" 
            height="50"
            fill="black" 
            class="rectangle"/>
     
      <rect x="0" 
            y="50" 
            width="50" 
            height="50"
            fill="orange"/>
    </svg>

Según lo que leo define la porción de la imagen que se va a mostrar ademas de las coordenadas a partir de donde se tomara esa porción.  Pero aun no tengo claro si en el caso del código de arriba, partiendo del punto 0,0 se tomara una porción equivalente al 50% de los 500 de alto y ancho que le di al contenedor o si ese 50 y 100 equivalen al 50% y 100% de la pantalla (el viewport donde se muestra la imagen)
De acuerdo al código de arriba la salida que espero es el primer rectángulo dibujandose en 0,0 tomando un 50% del contenedor, pero no es así porque por la izquierda hay una parte vacía y hasta después se muestra el rectángulo.  Si viewbox indica la porción y coordenadas que se mostraran de la imagen entonces el primer rectángulo debería verse justo al comienzo porque su coordenada esta en 0,0. 
Alguien podría explicar con claridad lo que viewbox hace y de que manera. 

A:

La sintaxis del atributo viewBox es:
viewBox = "desdeX desdeY anchura altura"

En el ejemplo de tu pregunta tienes un elemento svg cuyo contenido tiene una anchura de 50 unidades y una altura de 100 unidades (viewBox="0 0 50 100"). 
Sin embargo el tamaño del elemento svg ( el viewport ) es de 500px / 500px.  Como puedes ver no guarda las mismas proporciones. 
En SVG hay otro atributo: preserveAspectRatio.  Si preserveAspectRatio="none" el contenido del elemento SVG aparece deformado para ocupar toda la superficie del elemento SVG:

<svg width="500" height="500" viewbox="0 0 50 100" style="background-color: blue" preserveAspectRatio ="none"  >
      <rect x="0" 
            y="0" 
            width="50" 
            height="50"
            fill="black" 
            class="rectangle"/>
     
      <rect x="0" 
            y="50" 
            width="50" 
            height="50"
            fill="orange"/>
    </svg>

Si el valor de preserveAspectRatio no es none la sintaxis utilizada es:
preserveAspectRatio ="alineamiento [ meet | slice | none ]"

El valor por defecto de preserveAspectRatio es xMidYMid meet donde
xMidYMid alinea el centro del axis x del viewBox ( el contenido del lienzo SVG ) con el centro del axis x del viewport (el lienzo SVG) y el centro del axis y del viewBox ( el contenido del lienzo SVG ) con el centro del axis y de viewport (el lienzo SVG)
El alineamiento tiene 2 componentes: la primera parte indica como alinear el centro del axis x y el segundo componente indica como alinear el centro del axis y.
Estos son los posibles valores de los controladores de alineamiento:
xMin  alinea el valor desdeX con el borde izquierdo del viewport ( el lienzo SVG )
xMid  alinea el centro del axis x del viewBox ( el contenido del lienzo SVG ) con el
centro del axis x de viewport (el lienzo SVG)
xMax  alinea el valor anchura con el borde derecho del viewport ( el lienzo SVG )
YMin  alinea el valor desdeY con el borde superior del viewport ( el lienzo SVG )
YMid  alinea el centro del axis y del viewBox ( el contenido del lienzo SVG ) con el centro del axis y de viewport (el lienzo SVG)
YMax  alinea el valor altura con el borde inferior del viewport ( el lienzo SVG )
El significado del segundo valor del atributo de preserveAspectRatio:
meet:    mantiene las proporciones y redimensiona el contenido ( viewBox ) para acomodarlo dentro de viewport. 
slice:   mantiene las proporciones y corta la parte del contenido ( viewBox ) que no encaja
none:   no mantiene las proporciones y la imagen aparece deformada, para que el contenido ( viewBox ) pueda ocupar completamente la caja ( viewport ). 
Este es el ejemplo de MDN:

path {
    fill: yellow;
    stroke: black;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

rect{fill:orange}
<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg">
  <defs>
     <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>
  
  <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>

  <!-- ( width>height) meet -->
    <rect x="0" y="0" width="20" height="10">
    <title>xMidYMid meet</title>
  </rect>
  <svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="25" y="0" width="20" height="10">
    <title>xMinYMid meet</title>
    </rect>
  <svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="50" y="0" width="20" height="10">
    <title>xMaxYMid meet</title>
    </rect>
  <svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>

  <!-- ( width>height) slice -->
  
    <rect x="0" y="15" width="20" height="10">
    <title>xMidYMin slice</title>
    </rect>  
  <svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="25" y="15" width="20" height="10">
    <title>xMidYMid slice</title>
    </rect>  
  <svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>
  
    <rect x="50" y="15" width="20" height="10">
    <title>xMidYMax slice</title>
    </rect>    
  <svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"><use href="#smiley" /></svg>

  <!-- ( width<height) meet -->
  
    <rect x="75" y="0" width="10" height="25">
    <title>xMidYMin meet</title>
    </rect>  
  <svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="90" y="0" width="10" height="25">
    <title>xMidYMid meet</title>
    </rect> 
  <svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="105" y="0" width="10" height="25">
    <title>xMidYMax meet</title>
    </rect> 
  <svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>

  <!-- ( width<height) slice -->
  
    <rect x="120" y="0" width="10" height="25">
    <title>xMinYMid slice</title>
    </rect>   
  <svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="135" y="0" width="10" height="25">
    <title>xMidYMid slice</title>
    </rect> 
  <svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>
  
    <rect x="150" y="0" width="10" height="25">
    <title>xMaxYMid slice</title>
    </rect>
  <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"><use href="#smiley" /></svg>

  <!--  none -->
  
    <rect x="0" y="30" width="160" height="60">
    <title>none</title>
    </rect>
  <svg preserveAspectRatio="none" x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg>
</svg>

En conclusión:

si es posible guarda las proporciones.  Para esto utiliza solo el atributo viewBox y el elemento svg tomara toda la anchura disponible (i.e. la anchura del elemento padre). 

si necesitas especificar el tamaño del elemento svg utiliza solo la anchura width.  La altura height será calculada guardando las proporciones. 

Si necesitas utilizar (como en tu ejemplo) una anchura y una altura que no respecta las proporciones no olvides utilizar el atributo preserveAspectRatio para controlar el alineamiento del viewBox en el viewPort.