How to export text cleanly

Question

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: (rmod val) (rmod val) (cfg val) I usually get a mess like this: (rmod val) (rmod val) (cfg val) 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 Answer

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.

What about clearing appearance rather than trashing the fill?

[george@wk] · Answer

I couldn't get any of the "Correct answers" to work for me (setting kerning to Metrics, clearing appearance), but here's a potentially useful regex that removes the extraneous <tspans> from <text> elements. Use carefully because it will alter text wraps and line breaks.
<tspan class="cls-\d*" x="[0-9.-]*" y="[0-9.-]*">|<tspan x="[0-9.-]*" y="[0-9.-]*">|</tspan>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.