SVG & Illustrator – Converting text into a path

Beginner Adobe Illustrator tutorial: In my most recent project working with illustrations in SVG, I encountered an issue where specific fonts were used in the design. When exporting the illustration into SVG and placing it on a web page, any computer/device that doesn’t have this font installed would use the browser’s default font (Times New Roman for example). In order for these fonts to show on the web, I would need to purchase the web font and host them on a server.

I overcome this issue by converting the text layers into paths and therefore displaying the text in their desired font whilst no longer needing to host font files. These four simple steps will help you achieve the same.

Before we begin, please note it is not recommended to convert considerable amounts of text (information, sentences, paragraphs, etc) into paths. The main reasons are accessibility and SEO and I recommended using HTML to achieve this rather than text in the SVG itself.

  1. text-layerFirst you need to select the layer containing your text using the Selection Tool (V). I usually double click on the text which will open Isolation Mode, this helps me know that I have definitely selected the text and not another element underneath or a group. The image above is a screenshot of the text selected in Adobe Illustrator CC.
  2. create-outlineNow that you have selected your text layer, go to the Menu at the top called “Type” and select “Create Outlines” or use the shortcut Ctrl + Shift + O for Windows / Cmd + Shift + O for Mac.
  3. letters-layerNow your text layer has transformed into a group of individuals letters. If you accidentally clicked away and cancelled your selection, you will need to hold down Shift whilst in Selection Tool and click each letter and this will select all the letters. Or you can hold your left mouse button down at the corner of your text and drag over your text which will also select them all.compound-pathI combine all these letters into one single path by going into the Menu called “Object” and selecting Compound Path > Make. Or you can use the shortcut Ctrl + 8 for Windows / Cmd + 8 for Mac. compound-layerThis is my layer structure now that I have combined all the letters.
  4. fill-pathNow that my text is converted to a path, I need to add a fill to my path. You can find the fill (left side)/stroke (right side) menu at the top right corner of the screen.

path-afterIt may look like this process didn’t make any difference but it has changed the code in the SVG after exported.
This is SVG code exported for the word “Predict” as <text>. Notice that it is using a specific font called “ITC Charter Com”. This font will only be displayed if the user already has this font installed on their computer/device or you buy the webfont and host it on a server which is unnecessary for a few words in a graphic.

<text xmlns="" transform="translate(446.34 146.1)" font-size="11.38" fill="#fff" font-family="ITC Charter Com" font-weight="700" font-style="italic">P
<tspan x="6.63" y="0">r</tspan>
<tspan x="11.65" y="0">e</tspan>
<tspan x="16.89" y="0">d</tspan>
<tspan x="23.52" y="0">ict</tspan>


Now the text is a path, it contains data of its co-ordinates that draws out the word in the shape of the ITC Charter Com font and I have added a fill of white. No need to mess with fonts.

<path fill="#FFFFFF" d="M283.6,32.9l0.7-0.1l0.2-0.2l1.1-6.1l-0.1-0.2l-0.7-0.1v-0.5h2.9
		c-0.1,0-0.2,0-0.3,0s-0.2,0-0.3,0l-0.4,2.1l0.1,0.2l0.8,0.1v0.5h-3.2V32.9z M286.5,30c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0
		c0.7,0,1.3-0.2,1.6-0.6c0.4-0.4,0.6-0.9,0.6-1.6c0-0.9-0.5-1.4-1.6-1.4c0,0-0.1,0-0.1,0c0,0-0.1,0-0.2,0L286.5,30z M291.8,28.8
		L291.8,28.8z M300.1,32.6c-0.5,0.3-0.9,0.6-1.2,0.7s-0.7,0.2-1.1,0.2c-0.6,0-1.1-0.2-1.5-0.6c-0.4-0.4-0.5-0.9-0.5-1.6
		c0,0,0,0.1,0,0.1c0,1,0.4,1.5,1.2,1.5c0.3,0,0.5-0.1,0.8-0.2s0.6-0.3,1-0.6L300.1,32.6z M297.2,30.4c0.3,0,0.6-0.1,0.8-0.1
		c-0.3,0-0.6,0.2-0.9,0.5C297.6,29.3,297.4,29.7,297.2,30.4z M307.2,33.1c-0.2,0.1-0.4,0.1-0.6,0.2c-0.2,0.1-0.3,0.1-0.5,0.1
		c0.1,0.1,0.2,0.2,0.4,0.2c0.2,0,0.4,0,0.7-0.1V33.1z M305.1,29.1l-0.5-0.7h0l0,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
		c0.1,0.2,0.3,0.4,0.6,0.4c0.2,0,0.4,0,0.6-0.1c0.2-0.1,0.4-0.3,0.7-0.5L305.1,29.1z M310.8,32.6v0.5c-0.2,0.1-0.5,0.2-0.6,0.2
		C310.4,32.8,310.5,32.7,310.8,32.6L310.8,32.6z M309.9,25.2c0.2,0,0.4,0.1,0.5,0.2s0.2,0.3,0.2,0.5c0,0.2-0.1,0.4-0.2,0.6
		c0.3,0,0.6-0.1,0.8-0.2c0.3-0.1,0.6-0.4,1-0.7V32.5z M319.7,33.1c-0.3,0.1-0.5,0.2-0.7,0.2c-0.2,0.1-0.4,0.1-0.5,0.1

Leave a Reply

Your email address will not be published. Required fields are marked *