Using SVG as Type

The whole purpose of this book is to encourage you to work with actual text; however, in some cases you have to use image as text. Logotype is one of them. Although CSS gives you tremendous control of your type, it doesn’t allow you to manipulate the letterform (yet). With tools like Adobe Illustrator and Sketch, you can play around with the shapes of the letters to create a unique logo. To display your customized logotype on the web, you need to convert it to an image. Bitmap formats such as PNG (Portable Network Graphics) and GIF (Graphics Interchange Format) would do the job, but SVG (Scalable Vector Graphics) is the way to go. Because SVG is resolution independent, it works well on any screen device. Another advantage of SVG is its small file size. Let’s take a look at a simple process of creating a vector-image type for the web.

Crafting a Scalable-Image Type

My tool of choice for working with vector graphics is Illustrator. In the past few years, Illustrator (even more than Photoshop) has become one of my favorite web design softwares because it works so well with type. All the examples in this book were created using Illustrator. I highly recommend learning it, but you can use any vector tool you feel comfortable with.

When crafting a vector-image type, you want to take the mobile-first approach just like responsive design to make sure that your work will be legible at a small size. In the example below, I set the artboard in Illustrator at 300px. If you are reading this on your desktop computer, you can shrink and expand the width of your browser to see how well the type scales.

scalable type
Prowebtype sets in League Gothic Regular.

If you use Illustrator to create your graphical type, make sure you convert your type to outline before saving it as a SVG format. Otherwise your font will be replaced with the default font if visitors don’t have the font you chose on their device. Here is an example:

unsupported type
Myriad Pro replaced League Gothic when the original font is missing.

Embedding SVG

To embed SVG in your webpage, you can use <embed>, <object>, <iframe>, or even inline <svg>, which adds direct code into your markup. The simplest way to embed your SVG, however, is to reference it just like you do with an image. Here is an example using the <img> tag:

<img src="prowebtype.svg" alt="prowebtype">

Then you can use CSS to control the size of your graphic:

img {width: 100%; height: auto;}

The only drawback of using <img> is that SVG doesn’t scale properly in Internet Explorer. If you want to support IE, read Nicolas Gallagher’s “Using Canvas to Fix SVG Scaling in Internet Explorer.” For other methods, check out Amelia Bellamy-Royds’s “How to Scale SVG.”

Optimizing SVG

Before uploading your SVG files to your server, you should optimize them to reduce the file size. Making the transition from bitmap to vector already saved you a great deal of kilobytes, but you can never be too frugal when it comes to website performance. To optimize your graphic in Illustrator, turn your type into outlines (select “Create Outlines” in the “Type” dropdown menu) and simplify the path (go to “Object,” choose “Path,” and “Simplify...”). You need to test the percentage of the “Curve Precision” to make sure that your image won’t be affected. Once you optimized your graphics in Illustrator, export them as SVG, and then run them through SVGOMG, Jake Archibald’s excellent online SVG optimizer. Again, play around with the settings that the tool provided to get the most reduction without losing the quality of your graphical type. Those are the basic steps you should take to make your SVG ready for the web. If you want to delve deeper, read Raymond Schwartz’s “Understanding and Manually Improving SVG Optimization.”