After you spend hours reading and testing, thus learning the basics of SVG, you may come away knowing a ViewBox is not really needed to produce a correct result in Browsers/other
Programs that use SVG are dependent on the folks coding the program. Below is a homemade example of a Basic Rectangle with a Rectangle cutout (done via usng SVG’s “intrinsic” subtraction. Comments are included.
Try it in browser of interest (try adding a ViewBox with correct Dimension’s…)
EDIT #1: It can get confusing, especially when considering various programs/browsers often require a specific SVG format/Version (example below for Exporting SVG from EZdraw). There are other standards, too and of additional Importance is the ‘Format’ of how the Data is expressed ( " or ’ quotes). Some programs except both ways, some don’t.
And, for Clarity of ViewBox data (by example): a Width of 5.555" is: 5.555in x 72dpi = 400px, that’s the value to put in the ViewBox for the width… Thus, stressing the importance of knowing the DPI of the viewing program (or, you get a incorrectly scaled image… Fun, isn’t it 
EDIT #2: Out of curiosity, I loaded Kicad Exported SVG into FreeCAD and was prompted to select DPI (screenshot below). I don’t remember any other Program being that smart about SVG (it’s a Wild-West world when it comes to SVG…). FreeCAD seems to expect that Inkscape was used to create SVG’s…
Time for me to move on from this post…
<?xml version="1.0" standalone="no"?>
<!-- Hand Coded -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="400">
<!-- Rectangle with cutout. Rectangle points go CW, Cutout goes CCW. That makes it -->
<!-- NOTE: The cutout uses a MoveTo for closing it, instead of "Z" close path-->
<!-- that ensures Fritzing recognizes it, or it will be left 'Open' -->
<path d="M0,0 L500,0 L500,400 L0,400 L0,0 Z
M300,100 L300,300 L400,300 L400,100 L300,100" fill="green" stroke-width="3" />
</svg>
Results:
