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

Andres Velasquez
Andres Velasquez
19,671 Points
Posted by Andres Velasquez
Andres Velasquez
19,671 Points

SVG image displays as code not as image.

HELP!! :)

As always any help regarding this matter is greatly appreciated. I've been trying to use and SVG for the following website http://www.ajvelasquez.com/test, I've followed the tutorial from the Flexible Images Part One: Vector Graphics video and my SVG display as code not as the image.

Does anyone have any ideas as to why this could be happening?

Thanks in advance! Andres

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Looks like your web server isn't serving svg as the correct MIME type. Check out how the validation on the file fails

Here are some instructions on how to configure your web server for SVG to fix this issue.

Andres Velasquez
Andres Velasquez
19,671 Points
Andres Velasquez
Andres Velasquez
19,671 Points

Hey james, you are awesome! Thank you so much! I can only hope that one day I can pay it forward :) I ended up creating and .htaccess file in the /test forlder with the code that was suggested in your "instructions on how to configure your web server for SVG" link.

Thank you once again!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Delete the first 2 lines in your svg file then it will show up, like it does in my test codepen

Also you made a typo in the link <a href="img/easymail.lgoo.svg">

Andres Velasquez
Andres Velasquez
19,671 Points
Andres Velasquez
Andres Velasquez
19,671 Points

James, I appreciate you help! I fixed the typo (good looking out!!!) and I also copied and pasted your code pen code and replaced it for the one on the svg but it still does not work :(.

Regards, Andres

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

It helps if I actually read error messages, turns out the issue isn't with your file or site at all but with your web server. The way to test this is try to serve up any SVG. See my new answer on how to fix this.