Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

SVG About to make my head explode

Hi there

I am using SVG's for the first time on this site

http://www.justg.co.uk/smgwp/

Using them is not the problem it is the backwards use - eg. being able to use them IE8 etc

I have modernizer ticking away on the site and therefore I am using this

  <script>if (!Modernizr.svg) {
$('img[src$=".svg"]').each(function()
{
    $(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
});
}</script>

positioned in my footer to switch out the files and replace them with PNG's all of which I have uploaded to my img directory.

Also I am using SVG as a background image.

Can anyone tell me why this is not working in IE8 please.

If it helps this is a Wordpress site

G

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points

I assume you are referring to the social media icons in the footer. If that's the case then it appears to me, at the time of writing, that you have svg elements coded into the page rather than calling them inside img elements. With that being the case your script won't work obviously, as there are no image tags with an svg in the src attribute.

If you are going to leave the svg hardcoded into the page then you will need to write a script that removes that element and insert an img tag, with the appropriate .png, in it's place.

As an aside, I would also suggest that you remove the height and width from the svg code which would allow you more flexibility with resizing if need be without adding additional resources. Set the width and height from the img tag (if you go that route) or with CSS.