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

General Discussion

Posted by Andrea Sorrell
Andrea Sorrell
4,736 Points

Question about SVG files

Has anyone encountered a problem with a SVG file not working in Firefox. I am currently working on a project on my local server and the logo SVG file is not showing up in Firefox but it does show up in Chrome and Safari. Is it a bug that can be fixed when I go live? 

<!DOCTYPE html>
<html>
    <head>  
    <title><?php echo $pageTitle; ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <script src="external/matchmedia.js"></script>
    <script src="picturefill.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    </head>
    <body>

    <div class="container clearfix">
        <div id="logo" class="grid_4">
            <a href="index.php" class="svg">            
                <object data="img/tall-pines-logo.svg" type="image/svg+xml" class="logo">
                    <!--[if lte IE 8 ]-->
                      <img src="img/tall-pines-logo.png" alt="Tall Pines Logo">
                    <!--![endif]-->
                </object>
                </a>

        </div>
        <div id="nav" class="grid_8 omega" >
            <ul>
                <li class="about"><a href="about.php">About</a></li>
                <li class="services"><a href="services.php">Consulting Services</a></li>
                <li class="events"><a href="events.php">Events</a></li>
                <li class="contact"><a href="contact.php">Contact Us</a></li>
            </ul>
        </div>

2 Answers

Brian Hernandez
Brian Hernandez
20,285 Points
Brian Hernandez
Brian Hernandez
20,285 Points

According to http://caniuse.com FF SVG Support says only SVG fonts are NOT supported in the latest FireFox. Everything else should be good...

I also use an SVG logo in a site of mine and it renders fine on FF running on OS X. But I just use the regular <img src="logo.svg">, I thought it was interesting that you used the <object> tag. I haven't seen that before but I'm still new to it all and learning.

Andrea Sorrell
Andrea Sorrell
4,736 Points
Andrea Sorrell
Andrea Sorrell
4,736 Points

Thank you Brian for info. My logo.svg file does contain fonts but I created outlines for text. I will try img src tag.