SVG text exportation creates a fragmented code
All texts I wrote in a drawing, when exported to SVG files, were not anymore consistent: fragments of texts were overlapping each others.
I opened SVG file using a text reader and I discovered that my texts were unnecessarily fragmented in many parts that finally were badly rebuild in the code.
-
Yeah, now I can confirm that.
Despite SVG export settings are the same for both export methods, Export for screens provides a different code and break words in places where kerning pairs get applied (you can check it by setting the kerning to 0, which gives whole words with Export for Screens method).The alignment gets shifted because lines get aligned from the left, and when a font gets changed, the width of a line does not match the more condensed one from the narrow font you used. Why the alignment changes though... Needs reviewing.
Finally, you have some garbage left inside of clipping masks — check with Outline mode and Layers panel. It does not influence the result visually, but not great in other senses.
I will try to bring attention to this problem.
Meanwhile, please Export As as a workaround.
Thank you for reporting this and your help with that little investigation. -
code001.it commented
I used Export for Screen.
I have indeed seen that using Save as the SVG XML is coherent and well divided, but... the text is not centered when I open the SVG in Edge nor in Chrome: not centered as it was in the original AI file!
-
Aha, thanks for the file!
The text though stays whole for me when I use Save As > SVG, default profile (1.1):
<text transform="matrix(1 0 0 1 19.746 48.8883)"><tspan x="0" y="0" class="st14 st15 st16">society for </tspan><tspan x="0" y="11" class="st14 st15 st16">organizational learning</tspan></text>
<text transform="matrix(1 0 0 1 18.5309 69.8383)"><tspan x="0" y="0" class="st17 st18 st19 st20">GLOBAL ASSOCIATION</tspan><tspan x="0.3" y="6" class="st17 st18 st19 st20">OF SOL COMMUNITIES</tspan></text>
<text transform="matrix(1 0 0 1 26.6038 84.7563)" class="st21 st22 st19">the SoL Global Network</text>Again, what your method for saving an SVG? Save As, Export, Export for Screens? These give different results. Please provide more details.
-
Kerning was Auto as you can see in the original file
-
Luca, can you check the kerning in the file? Optical or auto?
And can you attach both the original and resaved file and list settings you used when saving the original into SVG? -
J Bradley Johnson (US)
commented
I'm getting a new tspan for every letter "r" in my text. Why?
-
Anonymous
commented
set font kerning in AI to zero seems to stop it.
-
Wes Ruvalcaba
commented
Screenshot of the word Partition 1 being broken up into 9 tags.
-
Wes Ruvalcaba
commented
SVG export seems to break up any text by character in tspan elements, I'm guessing this is so the end product is kerned as nicely as possible.
In some cases I prefer readability/editability over the best possible output.
I would like an option to prevent characters from being put into individual <tspan> tags.
-
Sara Soueidan
commented
Reduce amount of <tspan>s when exporting SVG text
When exporting text in an SVG as SVG text (vs outlined), the exported text contains way too many <tspan>s which causes weird kerning and spacing issues in the browser.
To fix it, I usually have to manually remove the <tspan>s around individual letters so I can have one complete <text> that renders without weird spacing.
Please add the option to reduce number of <tspan>s to the new Export As? For text-heavy SVGs (such as charts and infographics) this is a huge pain to deal with and a lot of time is wasted doing the manual "fixing" and optimization.
Thank you <3
(Edited by admin) -
Chris Andert
commented
Unless the command for this is hidden from me, I cannot seem to find a solution to this age-old problem.
Where I work, I need the three following things to be true:
1) Create an SVG that preserves editing capabilities thereby eliminating the need for more than one file. So, only one SVG file, and not an AI + SVG file.
2) The fonts within that SVG must not break when displayed in a browser. The infamous "ArialMT" problem.
3) Must not require a find-and-replace action to correct the font after the export. All actions must be done in Illustrator.
There are currently two methods of export. Both have their pros and cons.
File > Save As:
Text and shapes are editable as expected; Styles are not separated into new layers.File > Export > Export As:
Fonts render correctly in browser
Neither option above works for me. “Save As” preserves editing capabilities, but fonts break (“Arial” becomes “ArialMT”). Conversely, “Export As” renders fonts correctly (font-family: ArialMT, Arial;), but wrecks editability.
So I turned to Scripting (JS).
I can set all the ExportOptionsSVG() options I want. This includes:
var svgSaveOpts = new ExportOptionsSVG();
svgSaveOpts.preserveEditability = true;
However, fonts still break.
Next I targeted ArialMT fonts.
var thisFont = app.activeDocument.textFrames[0].textRange.characterAttributes.textFont;
if(thisFont.name == 'ArialMT'){
app.activeDocument.textFrames[0].textRange.characterAttributes.textFont = app.textFonts['Arial']; // throws error
}
"textFonts[]" only accepts the postscript name of the font, which is what “Arial” throws an error.Is there a way to mimic the export method used in “Export As” which renders fonts correctly AND preserves editing capabilities?
