Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG in Internet Explorer

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #259632
    grimski
    Participant

    Telling my SVG in Internet Explorer is giving some unexpected results. The 3 main things I’d like some help on are:

    1. The width of the image.
    2. The blurriness of the image
    3. A fallback image

    Here’s my SVG code:

    <figure class="align-center">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 760 580" class="eatwell-plate">
            <image xlink:href="../../img/content/diagrams/eatwell-plate.png" x="0" y="0" height="580px" width="760px" />
            <path href="#carbs" class="fancybox" d="M527.3,439.6c38.7-38,62.7-91,62.7-149.6c0-116-94-210-210-210v210L527.3,439.6z" />
            <path href="#fruit-veg" class="fancybox" d="M380,80c-116,0-210,94-210,210c0,67.8,32.1,128,81.9,166.4L380,290V80z" />
            <path href="#protein" class="fancybox" d="M251.9,456.4C287.4,483.7,331.8,500,380,500c11.8,0,23.3-1,34.6-2.8L380,290L251.9,456.4z" />
            <path href="#dairy" class="fancybox" d="M414.6,497.2c35.3-5.9,67.7-20.5,94.8-41.7L380,290L414.6,497.2z" />
            <path href="#oils-spreads" class="fancybox" d="M380,290l129.3,165.5c6.3-4.9,12.3-10.2,18-15.8L380,290z" />
            <circle href="#oils-spreads" class="fancybox" cx="664" cy="463.9" r="50" />
            <circle href="#sugar" class="fancybox" cx="95" cy="114.9" r="50" />
            <circle href="#water" class="fancybox" class="st1" cx="665" cy="94.9" r="70" />
        </svg>
    </figure>
    
    1. First things first, when I view this SVG on Microsoft Windows (displays fine on my Mac in Chrome, Firefox and Safari) the SVG does not display at full size, it’s shrunk. I managed to fix this by adding height="580px" width="760px" to the SVG tag which seemed to do the job. Is that the correct fix for this?
    2. However, although the image now displayed at it’s full width it displayed very blurry. Which is why I’m asking if it’s the right approach to take?

    3. As you might be able to see I use an image behind the SVG paths, unfortunately this is hidden when the SVG doesn’t display in IE8. I tried adding a src URL to the image element which did display a version of the background image but it stretched the image vertically. Is there a way to prevent this?

    Also the SVG is centred within a figure element, this has text-align: center; set. What is odd is that the text that follows the figure element is also centred even though it’s after/outside it. It’s almost as though the broken SVG interferes with the closing tag?

    Hope someone can shed some light on this. Tearing my hair out a bit! :)

    #259639
    grimski
    Participant

    Is the information:

    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    

    Really needed for inline SVG’s in HTML? Removing that seems to fix the issue with the text centring after the figure element in IE8. Removing the xmlns="http://www.w3.org/2000/svg in particular but removing the lot doesn’t seeeeeeem to break anything?!

    #259673
    Shikkediel
    Participant

    As far as I know, it is not needed when using SVGs in HTML…

    #259674
    grimski
    Participant

    I’ve had some problems removing that data before but I can’t detect any problems this time. So yeah, I think when the SVG is inline in the HTML it must be ok to remove. Just when the SVG is a separate file it may be required!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.