SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: <svg> problems

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <svg> problems

    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. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.sitepoint.com/forums/show...-expert-needed

    Actually, adding
    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •