Using SVG & Illustrator to Create Curvy Text

Adding a straight line of text in an iBook is pretty straightforward, but what if you want to add some flair to your book with text that follows a curved line? That’s when a little SVG and Adobe Illustrator knowledge goes a long way. By letting Illustrator generate the SVG code, you’ll save the time of calculating the curve and text placement on your own.

Step 1: Create the Curve in Illustrator

Start by launching Adobe Illustrator. Click File > New to create a new file. Make sure the width and height of your Illustrator file is the same width and height as your viewport in your XHTML file. In this example we’ll use the dimensions 612px by 792px:

Screenshot: setting up the Illustrator file.

Click on the Pen Tool in the Tools Palette. Click on the art board window to make an anchor point and click another location across the screen to make a second anchor point.

Click and hold the Pen Tool to reveal the additional tools, and select Convert Anchor Point. Click and drag one of the anchor points to make a curve.

Click the Type Tool and hover over the beginning of the curvy line until the cursor shows a wavy line.

Click the art board and the cursor will be positioned on the curvy line. Type "Check out my awesome curvy line!!" (or something equally cool).

Step 2: Setting the Options

Increase the size of the text if needed, then click File > Save As. Choose “SVG” from the Format drop down and choose a name and location for your file before clicking “Save”. Some of the SVG Options settings don’t apply to our situation; let’s go over the settings we need to specify. Set “SVG Profiles” to “SVG 1.1”. In the “Fonts” box set “Type” to “SVG” and “Subsetting” to “None (Use System Fonts)”. Click the “More Options” button in the bottom left corner. In the “Advanced Options” box set “CSS Properties” to “Presentation Attributes”. Make sure to only check the boxes next to “Output fewer elements” and “Use element for Text on Path”.

Click “OK” and close Illustrator.

Step 3: Preparing the XHTML File

Launch your text editor and create a new XHTML file. Add the following code to the file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:epub="http://www.idpf.org/2007/ops"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <head>
        <title>SVG iBooks Example</title>
        <meta name="viewport" content="width=612, height=792" />
    </head>
    <body>

    </body>
</html>

Aside from the typical EPUB and XHTML namespaces, you’ll notice two new namespaces, one for “svg” and the other for “xlink”. Both of these namespaces are required for SVG. The viewport here matches the size of our original Illustrator file. If you selected different dimensions for your Illustrator file, you’ll want to change your viewport code to match the Illustrator dimensions.

Step 4: Adding the SVG Code

Add the following SVG code inside the body tag.

<svg:svg version="1.1"
                id="curvyText"
                xml:space="preserve">
            
            <svg:path id="path01" style="fill:none;" d=" " />
                <svg:text>
                    <svg:textPath  xlink:href="#path01" startOffset=" ">
                        <svg:tspan  font-family="' '" font-size=" ">    </svg:tspan>
                    </svg:textPath>
                </svg:text>
        </svg:svg>

Using the “svg:” namespace, we define a few different things, such as the version of SVG we are using and how to handle white space. The "id" can be anything you like.

Path Data

We’re going to copy five pieces of information from the Illustrator SVG file and place them in the same location inside the XHTML file. Open the Illustrator SVG file in your text editor. Copy the alphanumeric path data located inside the quotes next to the d=.

Paste the path data inside the quotes next to the d= in your XHTML file. The SVG path data holds the key to the curve, providing instructions for where to move to, how to create the curve, and where to end the line.

startOffset

Back in the SVG file, copy the percentage next to startOffset= and paste it inside the startOffset= quotes in your XHTML file.

The startOffset determines how far from the beginning of the line the text should begin.

font-family

Navigate back to the SVG file and copy the name of the font inside the quotes next to font-family=. Click on the XHTML file and paste the font inside the quotes next to font-family=.

font-size

Click on the SVG file again and copy the number inside the quotes next to font-size=. Click on the XHTML file and paste the size inside the quotes next to font-size=.

Text

Once more, navigate back to the SVG file. Copy the line of text that appears on the curve and paste it between the opening and closing svg:tspan tags.

Step 5: Testing

Let’s take a quick look in Safari to see how it looks. Open the XHTML file in Safari to see the curvy line.

Conclusion

Adding curvy text to your iBook can bring your text to life, adding emotion and a sense of realism to your project.

HIGHLIGHTS OF THE DAY