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

Posted by Andrew Stelmach
Andrew Stelmach
12,583 Points

Can't see SVG Text

https://www.dropbox.com/sh/lrgyq24kyjzxg71/AAAbdyg0tyoIRnVA1xWj8tMea?dl=0

There's my SVG file. It's a logo, and I want to display it in my navbar just as it is (but automatically sizes itself to fit its container).

I've tried inserting it using the <img> method in the html, and the '3' part of the logo (including the red circle) displays perfectly, but the text part of the logo is always invisible.

Do I need to do something like importing the font? I don't get it, and I can't find anything useful on the internet to help me (after about 20 mins of digging).

Any pointers?

Patrick Seamars
Patrick Seamars
7,574 Points

Can you post your code?

3 Answers

Matt West
Matt West
14,545 Points
Matt West
Matt West
14,545 Points

Hi Andrew,

Try converting any text to outlines before you save the .svg file and add it to your HTML. Most vector drawing applications like Adobe Illustrator and Sketch have the ability to do this.

In Adobe Illustrator, right click the text and select 'Create Outlines'. In Sketch, right click the text and select 'Convert to Outlines'.

If that doesn't work, please post your code and I'll be happy take a look. :)

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I don't really know anything about SVGs, but found this article on StackOverflow that might be relevant: http://stackoverflow.com/questions/3924646/how-to-properly-display-multiline-text-in-svg-1-1

Carlos Diaz
PLUS
Carlos Diaz
Courses Plus Student 9,006 Points
Carlos Diaz
Carlos Diaz
Courses Plus Student 9,006 Points

Andrew, make sure you delete the width and height inside your svg file.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="97px" height="79px" viewBox="0 0 97 79" enable-background="new 0 0 97 79" xml:space="preserve"> <rect x="0.5" y="0.5" fill="#FF0000" stroke="#FFFFFF" stroke-miterlimit="10" width="67" height="57"/> <rect x="29.5" y="21.5" fill="#00FF00" stroke="#FFFFFF" stroke-miterlimit="10" width="67" height="57"/> </svg>

then, you can use the structure below: (give the width and height here <svg width="207" height="50"> <image xlink:href="img/yoursvg.svg" src="img/yourLogo.png" id="" width="207" height="50" /> <!--[if lte IE 8]> <img src="img/yourLogo.png" alt="" id="" /> <![endif]--> </svg>

Hope that help