SVG in Internet Explorer

[grimski]

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! :)

[grimski]

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?!

[Shikkediel]

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

[grimski]

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!

[Author]

Posts