An example that shows certain variables affecting how SVG displays content.

SVG-viewBox-Example.html

<!-- No Viewbox -->
<svg width="100px" height="100px">
  <rect x="0" y="0" width="5" height="5" 
        fill="yellow" stroke="blue" stroke-width="0.2"  />
  <rect x="1" y="1" width="3" height="3" 
        fill="yellow" stroke="red" stroke-width="0.2"  />
  <text x="1.5" y="3" font-size="1" font-family="Verdana" >
    AAA
  </text>
</svg>

<!-- Viewbox that matches the dimensions of all objects -->
<svg width="100px" height="100px"
     viewBox="0 0 5 5">
  <rect x="0" y="0" width="5" height="5" 
        fill="yellow" stroke="blue" stroke-width="0.2"  />
  <rect x="1" y="1" width="3" height="3" 
        fill="yellow" stroke="red" stroke-width="0.2"  />
  <text x="1.5" y="3" font-size="1" font-family="Verdana" >
    AAA
  </text>
</svg>

<!-- SVG height cut in half, drawing shrinks and centers  -->
<svg width="100px" height="50px"
     viewBox="0 0 5 5">
  <rect x="0" y="0" width="5" height="5" 
        fill="yellow" stroke="blue" stroke-width="0.2"  />
  <rect x="1" y="1" width="3" height="3" 
        fill="yellow" stroke="red" stroke-width="0.2"  />
  <text x="1.5" y="3" font-size="1" font-family="Verdana" >
    AAA
  </text>
</svg>

<!-- SVG width cut in half, drawing shrinks and centers -->
<svg width="50px" height="100px"
     viewBox="0 0 5 5">
  <rect x="0" y="0" width="5" height="5" 
        fill="yellow" stroke="blue" stroke-width="0.2"  />
  <rect x="1" y="1" width="3" height="3" 
        fill="yellow" stroke="red" stroke-width="0.2"  />
  <text x="1.5" y="3" font-size="1" font-family="Verdana" >
    AAA
  </text>
</svg>

<!-- SVG height is doubled, size of object stays the same and centers -->
<svg width="100px" height="200px"
     viewBox="0 0 5 5">
  <rect x="0" y="0" width="5" height="5" 
        fill="yellow" stroke="blue" stroke-width="0.2"  />
  <rect x="1" y="1" width="3" height="3" 
        fill="yellow" stroke="red" stroke-width="0.2"  />
  <text x="1.5" y="3" font-size="1" font-family="Verdana" >
    AAA
  </text>
</svg>

<!-- SVG height is doubled but preserveAspectRatio is set to none, drawing stretches to fit the entire space -->
<svg width="100px" height="200px"
     viewBox="0 0 5 5" preserveAspectRatio="none">
  <rect x="0" y="0" width="5" height="5" 
        fill="yellow" stroke="blue" stroke-width="0.2"  />
  <rect x="1" y="1" width="3" height="3" 
        fill="yellow" stroke="red" stroke-width="0.2"  />
  <text x="1.5" y="3" font-size="1" font-family="Verdana" >
    AAA
  </text>
</svg>