I have a few problems with an SVG. They're probably pretty straightforward for someone with a bit more experience so I'll list them one by one below. Before that, here's the markup:
<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>
- The image is too small in Internet Explorer. I fixed this just now by adding
height="580px" width="760px"
to the SVG tag - is that correct? Worth noting it needs to be responsive. - The reason I ask is that correct is, is worked but once the image was 'full size' the
image
png was very blurry. So is there a better solution to point #1 or a fix for the blurriness? - When the SVG can't be displayed (IE8) can I specify a fallback JPG or PNG that is displayed in it's place? It's for education, hence the crappy browser I need to support!
Thanks, I think that about covers it - hope someone can advise on the best practice/solutions for these issues!