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


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)); ?>