How to export text cleanly

[__JMW__]

The text in my illustrations usually exports as a complete mess in SVG - our developers need something cleaner. i.e. instead of getting something like this:

      <text id="RMOD-A" class="cls-2" x="329" y="403.79" text-anchor="middle">(rmod val)</text>

      <text id="RMOD-B" class="cls-2" x="287" y="175.5" text-anchor="middle">(rmod val)</text>

      <text id="R-CFG" class="cls-2" x="244" y="403.79" text-anchor="middle">(cfg val)</text>

I usually get a mess like this:

      <g id="RMOD-B">

        <text class="cls-2" transform="translate(259.96 174.84)"><tspan x="0" y="0">(rmod </tspan><tspan class="cls-20" x="35.3" y="0">v</tspan><tspan x="41.03" y="0">al)</tspan></text>

      </g>

      <g id="RMOD-A">

        <text class="cls-2" transform="translate(301.83 403.79)"><tspan x="0" y="0">(rmod </tspan><tspan class="cls-20" x="35.3" y="0">v</tspan><tspan x="41.03" y="0">al)</tspan></text>

      </g>

      <g id="R-CFG">

        <text class="cls-2" transform="translate(222 403.79)"><tspan x="0" y="0">(cfg </tspan><tspan class="cls-20" x="24.29" y="0">v</tspan><tspan x="30.02" y="0">al)</tspan></text>

      </g>

As you can see above, the text is (for some reason) being sliced into multiple "tspan" elements. This is not the most extreme example - in some cases the text can be split (seemingly randomly) into a great many "tspans" instead of being a single "text" entry.

 As a result, I am currently having to parse and fix all of my SVG exports by hand, which is a very time-consuming business. Any advice on how to eliminate/minimise this would be gratefully received.

[Doug A Roberts · Accepted solution]

One possible cause of this is nonstandard kerning. Is your type set to something other than 'Metrics'?

[__JMW__]

Actually, we need to set it to zero - but you're right inasmuch as it wasn't set to zero, but "auto".

But how can I get "<text id="blah blah"> - currently illustrator SVG export always wraps text in a "<g>" group and names that instead. Our (custom) application that takes our SVGs expects the text to get the ID (as is specified in my illustrator files), not a group (which is non-existent in the illustrator original).

[Doug A Roberts]

I get non-split text objects when using Metrics.

Are you using Save As or Export? What settings? Using 'Layer names' as object ID adds those <g> elements.

[Doug A Roberts]

Just testing options -- if I name the text objects, I get SVG <text> elements with those names as IDs. Still in <g> elements for the layer though.

[__JMW__]

Hmmm... I get the same on a test file too:

<?xml version="1.0" encoding="UTF-8"?>

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">

  <defs>

    <style>

      .cls-1 {

        font-family: MyriadPro-Regular, 'Myriad Pro';

        font-size: 12px;

      }

    </style>

  </defs>

  <text id="Test_Me" data-name="Test Me" class="cls-1" transform="translate(651.52 319.25)"><tspan x="0" y="0">Lorem ipsum</tspan></text>

</svg>

So that's good news inasmuch as it proves that text IDs don't *have* to be in groups.

- I'll try and debug my master AI file to see if I can figure out how to fix it...

Thanks.

[Doug A Roberts]

Looks to me like if you leave the layer names default (i.e. 'Layer 1'), rename the individual text objects, and use Layer Names as Object ID in SVG export objects, you get <text> elements with the IDs as named in the file, and no <g> elements.

[__JMW__]

It seems to be something in the graphic styles.

If I paste some text from the offending file into a test file, I still get <g> ID's. However, if I merely apply the bland "Lorum Ipsum" test style to the pasted text, I get <text> IDs.

I am currently deleting parts of the graphic style to see if I can identify the culprit.

[__JMW__]

OK - I have now got a repeatable example:

1. Create a new Illustrator file:

2. Using the text ("T") tool, click anywhere on the artboard to create "Lorum Ipsum"

3. In the Character properties panel, change the Kerning from "Auto" to "0":

4. In the layers panel, rename it to "Example Text" (this step is important):

5. Now export as an SVG and see sow the ID is associated with the <text> section (this is what we want):

So far, so good... But now, this is where it goes wrong...

6. Now add a new fill from the menu on the Appearance properties panel:

7.  Next, immediately press the Trashcan icon in the appearance panel to delete that new fill that you added:

8. Theorectically, you are now back at step 5 - however, when you perform the export, you'll see now it has gained a group, and it is that group which receives the ID:

I've not found a manual way to reset things to step 5, other than by creating a style from freshly-made text, and applying it to the offending item.

[Doug A Roberts · Accepted solution]

What about clearing appearance rather than trashing the fill?

[__JMW__]

Yes, that works - the ID goes back into a <text> element.

Thanks for the suggestion!