Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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.)