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

Design

Problem with SVG browser rendering

Hi there, I was working on a logo and I want it to be resolution indipendent hence an SVG. The problem I'm experiencing is related to font rendering in the browser. When I save the file as an SVG 1.1, Chrome renders the text font correctly, while both Firefox and IE fail. Also notice that I'm using Myriad Pro as font for my text. Any tips?

3 Answers

Al Lu
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points

Why you have live text if its an image? You need the text to be vector shape as well. You have adobe illustrator?

Yes, I did it with Illustrator. It's basically a shape + styled some text. I grouped all the objects together and saved it as an SVG file

Al Lu
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points

Ok so click on the text box, and after that go to "type" and "create outlines" (also shift + ctrl + O). Now its not live text anymore its a vector shape.

It worked, thanks a lot :)