I have tried everything to get this to work but it just doesn't seem possible.

http://page-test.co.uk/vector.html

This demo shows the same vector image displayed in different ways.

Please expand and reduce the browser width as that is important too.

Box 3 and 4 uses the <svg> tag but I want to be able to use the <svg> tag and it display like the two boxes on the left (and work at all browser widths like the two on the left).

I have messed around with the viewBox (which is the only difference between box 3 and box 4) but still no.

If you view the source then all should be clear.

All 4 images are created from exactly the same file. Box 2 was created using this in PHP:
<?php echo base64_encode(file_get_contents($file)); ?>

Thanks