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.

WordPress

Nathalie C
Nathalie C
2,594 Points

Using svg instead of png for logo

I have been able to successfully place a logo graphic as a .png file using bloginfo('template_directory') as discussed in How to Build a WordPress Theme - Preparing to Code WordPress Templates - Theme Images Directory. But I am also working through Build A Responsive Theme at the same time. I've just replaced the .png file with .svg file. Is it really that simple, because in the Responsive Theme lesson placing an svg seems a more complicated process.

4 Answers

Nathalie C
Nathalie C
2,594 Points

Thanks John. What about a fallback though? I'm stumped with trying to implement one. I tried just lifting the fallback straight from static html page but that doesn't work, I just get a duplicated logo, one for svg and one for png. Should the fallback be placed on the functions php with a custom tag to hook in the correct place on the header file?

Try looking at this and see if it helps you. I haven't worked much with SVG's

http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

Thats about all it takes! If you are wanting it to be responsive you may need to open the SVG file in a text editor and delete the height and width if it includes it.

Nathalie C
Nathalie C
2,594 Points

Thanks John that's a really useful link and another to add to my twitter follow list : ) I think I have found a solution using a simple tutorial on creating and implementing custom action hooks into WordPress - so now I have a custom hook placed right after my svg logo in the header.php, which is defined and then assigned a function using echo on the functions.php to write the png fallback into the correct place within the html.

http://digwp.com/2009/09/wordpress-action-hooks/

Glad I could help!

Matt Campbell
Matt Campbell
9,767 Points

Are you putting a hook in the header or in the functions.php file to hook into the header?

Nathalie C
Nathalie C
2,594 Points

Hi Matthew I've defined the hook on the functions.php with associated function and placed the hook in the header. Had trouble getting it to work at first because I couldn't get the image path right. In the end I had to state the full url as the echo wouldn't work if it contained a php tag for bloginfo('template_directory'). Just need to test it on an old browser now once I upload the site. I don't know how to put code on here, otherwise I'd show what I've done, but I haven't a clue if its correct, I'm guesstimating as I work through the two projects.