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

Alexander Sobieski
Alexander Sobieski
6,555 Points
Posted by Alexander Sobieski
Alexander Sobieski
6,555 Points

SVG Works with MAMP/XAMPP, but not on live site IF in HTTPS mode

Hey everybody,

I'm updating a wordpress theme for a client, and in doing so, I want to swap their logo out with an SVG version (looks better on retina displays and is WAYYY smaller). Her site is on GoDaddy, and the process has been "less than fun".

PROTIP if you're hosting with GoDaddy, you need to add the following to your .htaccess

#this adds a MIME Type to handle SVG files
AddType image/svg+xml svg
AddType image/svg+xml svgz

** SO... onto the question: **

I can't get the SVG to appear in Chrome or Firefox when the HTTPS version of the site is reached.

When I inspect the element, there seem to be "<pre>" tags added around the xml.

<!-- MY CODE-->
<object data="/wp-content/themes/diversitree/images/diversitree-logo.svg" type="image/svg+xml" class="svglogo">
    <!--[if lte IE 8]--> 
        <img src="http://diversitree.com/wp-content/themes/diversitree/images/diversitree-logo.gif" class="main-logo"> 
    <!--[endif]--> 
</object>

Displays as:

    <!-- http:// version-->
<object data="/wp-content/themes/diversitree/images/diversitree-logo.svg" type="image/svg+xml" class="svglogo">
    #document
        <!-- some adobe meta here, since it was made in illustrator -->
         <!DOCTYPE stuff here>
        <svg here></svg>


<!-- https:// version-->
  <object data="/wp-content/themes/diversitree/images/diversitree-logo.svg" type="image/svg+xml" class="svglogo">
    #document
        <pre>
           <html>
           <head></head>
             <body>
               <!-- some adobe meta here, since it was made in illustrator -->
                <!DOCTYPE stuff here>
                  <svg here></svg>

The https version looks like an iframe (with horizontal and vertical scroll bars), and inside the frame, is the XML for the svg file.

Any thoughts?

(works in MAMP with the same browsers -- I uninstalled the caching plug-in, and cleared the cache too).

1 Answer

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

Okay... so it turns out that it's TOTALLY a GoDaddy issue.

I guess it takes them a while to update their servers with simple FTP stuff (maybe doubly so if you're making lots of additions and reloading the site a bunch).

It fixed itself.

(Though I had to flush all my browser cache's, turn-off the website's caching plug-in, and wait a while. The problem was caused because GoDaddy kept serving-up an old stylesheet. I hate them. a lot.)