<svg> problems

HTML & CSS
1

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

2

Apart from the malformed markup - stray div, end tag - and the fact I cannot see the fourth image (too large a viewbox value) they do seem to appear to be all the same size and obviously you could always set the SVG height and width in percentages. Maybe it was the browser you were using. Unless I’m missing something.

3

Actually, adding


svg {max-height:100%}

…fixed it on nearly all browsers.

Safari 6 (desktop Safari) is still showing a problem, so I’m looking for a solution for that, but I’m guessing that’s going to take a genius.