SVG export with text – line breaks forcing text to convert to outlines
I've been working on a project that requires SVG files with embedded text and have discovered what seems to be a bug.
It seemed arbitrary at first, that some text objects would be converted to outlines while others would remain as text. I finally figured out that forced line breaks were the culprit, as illustrated in the screenshots I've attached. The problem is the same whether you use point type or area type objects.
I'm currently running the latest version of Illustrator (24.1.2) on macOS High Sierra (10.13.6).
I've also noticed this issue is similar to another one that might be related:
https://illustrator.uservoice.com/forums/601447-illustrator-bugs/suggestions/37024969-svg-text
Justin Penner
shared this idea
-
Andrew Swift
commented
Using a bullet list causes the same problem.
-
Andrew Swift
commented
Until AI 28, when saving an SVG with soft carriage returns (shift-return in Illustrator), text was not converted to outlines.
With Illustrator 28, Adobe significantly changed the format of exported SVGs.
Now, when saving an SVG with Font Type: `SVG`, using a soft carriage return (shift return) in Illustrator causes the text to be converted to outlines.
If I create a simple AI file containing only the text "test file", here is the resulting SVG code:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: #3e3e3e;
font-family: ArialMT, Arial;
font-size: 19px;
}
</style>
</defs>
<text class="cls-1" transform="translate(58.5 71.5)"><tspan x="0" y="0">test file</tspan></text>
</svg>If I add a single soft return between the two words, I get an alert "The following items could not be exported properly / Text is converted to outline"
the result is an SVG file that is five times bigger:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: #3e3e3e;
stroke-width: 0px;
}
</style>
</defs>
<path class="cls-1" d="M63.398,70.006l.241,1.475c-.47.099-.891.148-1.262.148-.606,0-1.076-.096-1.41-.288s-.569-.444-.705-.756c-.136-.312-.204-.969-.204-1.971v-5.668h-1.225v-1.299h1.225v-2.44l1.661-1.002v3.442h1.679v1.299h-1.679v5.761c0,.476.029.782.088.918.059.136.154.244.287.325.133.08.323.121.571.121.186,0,.43-.022.733-.065Z"/>
<path class="cls-1" d="M71.776,68.327l1.726.213c-.272,1.008-.776,1.791-1.512,2.347-.736.557-1.676.835-2.82.835-1.441,0-2.583-.444-3.428-1.331-.844-.887-1.266-2.132-1.266-3.734,0-1.657.427-2.944,1.28-3.859.854-.915,1.96-1.373,3.321-1.373,1.317,0,2.394.448,3.229,1.345.835.897,1.252,2.159,1.252,3.785,0,.099-.003.247-.009.445h-7.348c.062,1.082.368,1.911.918,2.486.55.575,1.237.863,2.06.863.612,0,1.135-.161,1.568-.482.433-.322.776-.835,1.03-1.54ZM66.293,65.627h5.501c-.074-.829-.285-1.45-.631-1.865-.532-.643-1.222-.965-2.069-.965-.767,0-1.412.257-1.934.77-.523.513-.812,1.2-.868,2.06Z"/>
<path class="cls-1" d="M74.93,68.559l1.651-.26c.093.662.351,1.169.775,1.521.423.353,1.016.529,1.776.529.767,0,1.336-.156,1.707-.469.371-.312.557-.679.557-1.099,0-.377-.164-.674-.492-.891-.229-.148-.798-.337-1.707-.566-1.225-.309-2.074-.577-2.546-.802-.474-.226-.832-.538-1.076-.937-.245-.399-.367-.84-.367-1.322,0-.439.101-.846.301-1.22.201-.374.475-.685.821-.932.26-.192.614-.354,1.062-.487.448-.133.929-.199,1.442-.199.773,0,1.452.111,2.036.334.585.223,1.016.524,1.294.905s.47.889.575,1.526l-1.633.223c-.074-.507-.289-.903-.645-1.188-.355-.284-.858-.427-1.507-.427-.767,0-1.314.127-1.642.38-.328.254-.492.551-.492.891,0,.217.068.411.204.584.136.179.349.328.64.445.167.062.659.204,1.475.427,1.181.315,2.005.574,2.472.775.467.201.833.493,1.1.877.266.384.399.86.399,1.429,0,.557-.163,1.081-.487,1.573-.325.492-.793.872-1.406,1.141s-1.305.404-2.078.404c-1.28,0-2.256-.266-2.927-.798-.671-.532-1.099-1.32-1.285-2.366Z"/>
<path class="cls-1" d="M88.744,70.006l.241,1.475c-.47.099-.891.148-1.262.148-.606,0-1.076-.096-1.41-.288s-.569-.444-.705-.756c-.136-.312-.204-.969-.204-1.971v-5.668h-1.225v-1.299h1.225v-2.44l1.661-1.002v3.442h1.679v1.299h-1.679v5.761c0,.476.029.782.088.918.059.136.154.244.287.325.133.08.323.121.571.121.186,0,.43-.022.733-.065Z"/>
<path class="cls-1" d="M60.151,101.5v-8.554h-1.475v-1.299h1.475v-1.048c0-.662.059-1.153.176-1.475.161-.433.444-.784.849-1.053.405-.269.972-.404,1.702-.404.47,0,.989.056,1.559.167l-.25,1.457c-.347-.062-.674-.093-.983-.093-.507,0-.866.108-1.076.325-.21.217-.315.622-.315,1.215v.909h1.92v1.299h-1.92v8.554h-1.661Z"/>
<path class="cls-1" d="M65.041,89.82v-1.92h1.67v1.92h-1.67ZM65.041,101.5v-9.853h1.67v9.853h-1.67Z"/>
<path class="cls-1" d="M69.215,101.5v-13.601h1.67v13.601h-1.67Z"/>
<path class="cls-1" d="M80.218,98.327l1.726.213c-.272,1.008-.776,1.791-1.512,2.347-.736.557-1.676.835-2.82.835-1.441,0-2.583-.444-3.428-1.331-.844-.887-1.266-2.132-1.266-3.734,0-1.657.427-2.944,1.28-3.859.854-.915,1.96-1.373,3.321-1.373,1.317,0,2.394.448,3.229,1.345.835.897,1.252,2.159,1.252,3.785,0,.099-.003.247-.009.445h-7.348c.062,1.082.368,1.911.918,2.486.55.575,1.237.863,2.06.863.612,0,1.135-.161,1.568-.482.433-.322.776-.835,1.03-1.54ZM74.735,95.627h5.501c-.074-.829-.285-1.45-.631-1.865-.532-.643-1.222-.965-2.069-.965-.767,0-1.412.257-1.934.77-.523.513-.812,1.2-.868,2.06Z"/>
</svg>I have tried saving as a copy, exporting for web, exporting via JSX with both `exportFile` using `ExportType.WOSVG` and `ExportType.SVG`.
Is there any way to export an SVG that won't cause text with soft returns to be converted to outline?
-
TTW
commented
Yup. This is happening.
Thanks for your post as I've spent an hour trying to work out whats going on!