Skip to main content
Andy Swift
Inspiring
June 26, 2024
Question

Soft carriage return in SVG causes text to be converted to outlines

Until AI 28, when exporting 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 (more info).

 

Now, when exporting 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:

 

 

and this is the result:

 

 

<?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?

This topic is closed to new replies. Start a new post to keep the conversation going.