Skip to main content
Participant
May 3, 2024
Question

Saving SVG creates new group around text

  • May 3, 2024
  • 3 replies
  • 985 views

I'm currently using Illustrator 28.4.1.

When I first started working on my SVG files, the Generator code was:

<!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
The CSS included in the file was using this format:
  .st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
  .st3{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
 
Now when I save my files, the style is being saved as:
      .cls-1, .cls-2, .cls-3, .cls-4 {
        stroke-width: 0px;
      }
      .cls-1, .cls-5, .cls-6 {
        fill: #000;
      }
 
My issue is that when I save my files, all of my text elements becomed magically wrapped inside of individual new groups. I started with all of my text inside a single group to keep them organized, but now each text has a group with "isolation: isolate;" css added to it. AND, each time I save the file, the groups are wrapped inside another group. My text group looks like this:
 
<g id="gText">
      <g id="t1170" class="cls-13">
        <g class="cls-13">
          <g class="cls-13">
            <g class="cls-13">
              <g class="cls-13">
                <g class="cls-13">
                  <g class="cls-13">
                    <text class="cls-5" transform="translate(290.98 309.849)"><tspan x="0" y="0">1170</tspan></text>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="t1169" class="cls-13">
        <g class="cls-13">
          <g class="cls-13">
            <g class="cls-13">
              <g class="cls-13">
                <g class="cls-13">
                  <g class="cls-13">
                    <text class="cls-5" transform="translate(290.579 339.832)"><tspan x="0" y="0">1169</tspan></text>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
 
This is how my text group looked when the SVG files were saving with the .st class names:
<g id="gText">
  <text id="t1170" transform="matrix(1 0 0 1 431.2 509.2966)" class="st13 st14">1170</text>
  <text id="t1169" transform="matrix(1 0 0 1 430.7999 539.2798)" class="st13 st14">1169</text>
 
How can I get my SVGs to go back to using the .st class names and not creating the groups?
This topic has been closed for replies.

3 replies

Participating Frequently
October 15, 2024

Has there been a resolution to this? 2022 file was saved out using AI 26.0 and doesn't have tspans.  2024 file was saved out using 28.2 and includes tspan. We need SVG files without tspan.

Participant
September 24, 2024

Running 28.7.1 and having the same issue and can't seem to figure out how to turn it off.  This recently just started happening to my files.  All my SVG's are saving in groups.  It makes it frustrating to ungroup every time I need to edit a file or to use that file.  I've have googled and this was the first place I saw any comment about this.  I just want my SVG's to save ungrouped.

Anubhav M
Community Manager
Community Manager
September 25, 2024

Hello @ginad2279696,

I am sorry to hear about your experience. Would you mind sharing a public link to a sample AI and SVG file after uploading it to Dropbox/Google Drive/etc. so I can check it with the team?

Looking forward to hearing from you.

 

Thanks,

Anubhav

Anubhav M
Community Manager
Community Manager
June 11, 2024

Hello @VictorS000,

Thanks for reaching out. Would you mind sharing a public link to a sample Ai/SVG file and screenshots of the settings used while exporting after uploading it to Dropbox/Google Drive/etc. so we can check it with the team?

Looking forward to hearing from you.

 

Thanks,

Anubhav