Using Text In SVG As Outlines

I started building a full site this week and was instantly confronted with the fact that I do not have a handle on using SVG on the web. This was made apparent when I tried to add a text based SVG image into my site without first converting the text to outlines. Curses!

When you save an SVG that consists of text and try to add it into a site, well, the browser will not recognize the font and it will be turned into something generic and ugly. To fix this we need to convert the text to an outline. The first thing you will want to do is get the artboard to fit snuggly around the text. Do this by going to Object > Artboards > Fit to Artwork Bounds. Screen Shot 2014-01-22 at 3.43.44 PM

Screen Shot 2014-01-22 at 3.52.41 PM

Once you have your final font in place, you will need to convert it to outlines. You do this by selecting all, then going to Type > Create Outlines.
Screen Shot 2014-01-22 at 12.02.52 PMScreen Shot 2014-01-22 at 12.15.50 PM

Once you have finalized your color selection, save the file as a SVG file and add image to your HTML. Below is an example of the HTML and image rendered on the web. Screen Shot 2014-01-22 at 2.56.38 PMScreen Shot 2014-01-22 at 2.53.19 PM

Chris Coyier gets more into the topic here. Also worth checking out is this Smashing Magazine article by David Bushell.

Happy effortless resizing!