How do I use an SVG “icon font” within Illustrator?

by

Trello uses an icon font and I’d like to figure out how to bring in some of the glyphs into an Illustrator project. Admittedly, this is going a bit backwards (usually you want to import Illustrator art into Glyphs). I’m creating a board mock-up in Illustrator to be used in a video (After Effects).

Here’s a direct link to Trello’s icon font SVG file: https://d2k1ftgv7pobq7.cloudfront.net/images/fonts/a91174257e439d87d1987b15ad199035/trellicons-regular.svg

Answer

I think I’m getting close to an answer (quack quack), but it’s pretty ugly so far.

They key is to get the structure of the SVG file to match what Illustrator is expecting. The easiest way to start is to simply save an existing illustrator file as SVG and open up the result in a text editor.

First, strip down the XML so that all you have the the basic “frame” of the SVG file without any content. Here’s an example.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px"
   height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">


</svg>

In the SVG file for the icon font, the glyphs are going to look like this (at least for Trello’s SVG icon font):

<glyph unicode="&#xf001;" d="M120 186q0 109 68 240t195.5 247.5t277.5 164.5l-9 -14q-106 73 -168.5 189.5t-62.5 249.5q0 146 72.5 269.5t197 195.5t271.5 72q144 0 268 -71.5t197 -195.5t73 -270q0 -132 -63 -249t-169 -193l-11 20q115 -37 218.5 -115.5t173 -170.5t110.5 -190t41 -179 q0 -78 -71 -138.5t-192 -96t-267.5 -53.5t-309.5 -18t-309.5 18t-267.5 53.5t-192 96t-71 138.5z" />

We’re going to need to modify that a bit before pasting into the file we plan to import into Illustrator. Here are some things I had to change:

  • Change the word glyph to path
  • You don’t need the unicode attribute, so change it to id. (I also modified the value so it Illustrator didn’t try to render the Unicode, e.g. "&#xf001;" became "xf001". This may not be neccesary).
  • Wrap the new path element in a g tag with an id that matches the id of the path.

Your glyph tag should now look something like this:

<g id="xf004">
   <path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>

Put together, the file will look like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px"
   height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">

<g id="xf004">
   <path id="xf004" d="M0 190v1300q0 64 30.5 97t89.5 33h1680q59 0 89.5 -33t30.5 -97v-1300q0 -63 -31 -96.5t-89 -33.5h-1680q-58 0 -89 33.5t-31 96.5zM320 510q0 -58 31 -89t89 -31h667q59 0 89.5 31t30.5 89v60q0 58 -30.5 89t-89.5 31h-667q-58 0 -89 -31t-31 -89v-60zM330 1110 q0 -58 28.5 -89t81.5 -31h1070q110 0 110 120v60q0 120 -110 120h-1070q-53 0 -81.5 -31t-28.5 -89v-60z" />
</g>

</svg>

Of course, you need to apply those steps for all of the glyphs you want to import, but that’s what Macros and Search/Replace are for 🙂

Attribution
Source : Link , Question Author : Ben McCormack , Answer Author : Ben McCormack

Leave a Comment