Adobe Illustratore delete my class names on svg images. How can I prevent this?-CodePudding

I have this svg image:

<svg width="160" height="250" xmlns="http://www.w3.org/2000/svg" >

  <path  d="M76.782 25.942c-.08-.815-2.192-20-22.867-21.928l.137-1.501c21.916 2.044 24.19 23.07 24.21 23.283l-1.48.146z" />
  <ellipse  fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391" />
  <path  d="M83.217 25.942c.08-.815 2.192-20 22.867-21.928l-.137-1.501c-21.916 2.044-24.188 23.07-24.209 23.283l1.479.146z" />
  <ellipse  fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391" />
  <path  fill="#787878" d="M59.722 72.779h40.557v27.564H59.722z" />
  <path  fill="#787878" d="M96.079 32.57v-8.546c-10.72-3.765-21.437-3.98-32.156 0v8.546h32.156z" />
  <path  fill="#787878" d="M48.499 158.432H61.27v81.291H48.499z" />
  <path  fill="#595959" d="M54.885 234.096c-9.526 0-17.244 7.119-17.244 15.903H72.13c0-8.784-7.72-15.903-17.245-15.903z" />
  <ellipse  cx="54.885" cy="200.79" rx="9.294" ry="9.423" />
  <path  fill="#787878" d="M60.607 203.823c-1.653 3.202-5.553 4.44-8.715 2.768-3.163-1.677-4.383-5.628-2.73-8.832 1.651-3.204 5.556-4.442 8.715-2.771 3.159 1.676 4.381 5.632 2.73 8.835z" />
  <path  fill="#787878" d="M98.729 158.432H111.5v81.291H98.729z" />
  <path  fill="#595959" d="M105.115 234.096c9.523 0 17.244 7.119 17.244 15.903H87.871c0-8.784 7.722-15.903 17.244-15.903z" />
  <ellipse  cx="105.113" cy="200.79" rx="9.295" ry="9.423" />
  <path  fill="#787878" d="M99.395 203.823c1.652 3.202 5.551 4.44 8.713 2.768 3.164-1.677 4.381-5.628 2.729-8.832-1.65-3.204-5.553-4.442-8.711-2.771-3.163 1.676-4.383 5.632-2.731 8.835z" />
  <path  fill="#787878" d="M38.291 95.944c-8.259 4.479-15.268 11.387-20.423 18.846C5.22 133.088 3.41 154.261 7.262 176.253l10.418-1.878c-3.338-19.01-2.353-37.016 8.665-53.158 4.23-6.199 9.988-12.042 16.923-15.812l-4.977-9.461z" />
  <path  fill="#595959" d="M9.604 166.5c-6.984 1.975-11.067 9.316-9.117 16.398a13.22 13.22 0 0 0 6.51 8.172 7.612 7.612 0 0 1-.426-1.141c-1.235-4.484 1.703-9.234 6.562-10.609 4.861-1.377 9.804 1.145 11.037 5.631.111.396.18.798.221 1.197a13.42 13.42 0 0 0 1.393-10.407c-1.951-7.08-9.195-11.218-16.18-9.241z" />
  <ellipse  cx="13.581" cy="132.93" rx="8.505" ry="8.623" />
  <path  fill="#787878" d="M9.299 135.199c1.237 2.396 4.154 3.322 6.52 2.07 2.364-1.252 3.278-4.211 2.042-6.605-1.236-2.398-4.152-3.324-6.52-2.072-2.363 1.252-3.276 4.211-2.042 6.607z" />
  <path  d="m42.356 94.049-8.341-1.248c-5.238 10.201-7.014 20.918-4.697 32.248l8.34 1.248 4.698-32.248z" />
  <path  fill="#787878" d="M121.709 95.944c8.258 4.479 15.268 11.387 20.421 18.846 12.647 18.299 14.458 39.472 10.606 61.464l-10.418-1.878c3.339-19.01 2.353-37.017-8.666-53.158-4.229-6.199-9.987-12.042-16.924-15.812l4.981-9.462z" />
  <path  fill="#595959" d="M150.395 166.5c6.984 1.975 11.067 9.316 9.119 16.398a13.229 13.229 0 0 1-6.511 8.172c.168-.363.313-.742.424-1.141 1.237-4.484-1.702-9.234-6.562-10.609-4.861-1.377-9.803 1.145-11.035 5.631-.109.396-.18.798-.223 1.197a13.429 13.429 0 0 1-1.393-10.407c1.952-7.08 9.198-11.218 16.181-9.241z" />
  <ellipse  cx="146.419" cy="132.93" rx="8.505" ry="8.623" />
  <path  fill="#787878" d="M150.7 135.199c-1.235 2.396-4.154 3.322-6.519 2.07-2.365-1.252-3.279-4.211-2.043-6.605 1.235-2.398 4.152-3.324 6.52-2.072 2.365 1.252 3.278 4.211 2.042 6.607z" />
  <path  d="m117.645 94.049 8.34-1.248c5.238 10.201 7.015 20.918 4.695 32.248l-8.339 1.248-4.696-32.248z" />
  <path  fill="#595959" d="M112.809 28.372H47.19c-5.814 18.663-5.499 37.322 0 55.983h65.621c5.498-18.661 5.814-37.32-.002-55.983z" />
  <path  fill="#FFF" d="M72.116 47.955c0 5.443-4.045 9.853-9.033 9.853h-1.971c-4.988 0-9.032-4.41-9.032-9.853s4.044-9.856 9.032-9.856h1.971c4.988 0 9.033 4.413 9.033 9.856z" />
  <path  d="M66.614 47.955c0 2.176-1.618 3.942-3.613 3.942h-1.807c-1.994 0-3.612-1.766-3.612-3.942 0-2.178 1.618-3.943 3.612-3.943H63c1.996 0 3.614 1.765 3.614 3.943z" />
  <path  fill="#FFF" d="M107.92 47.955c0 5.443-4.045 9.853-9.031 9.853h-1.973c-4.986 0-9.031-4.41-9.031-9.853s4.045-9.856 9.031-9.856h1.973c4.986 0 9.031 4.413 9.031 9.856z" />
  <path  d="M102.417 47.955c0 2.176-1.616 3.942-3.612 3.942h-1.807c-1.994 0-3.611-1.766-3.611-3.942 0-2.178 1.617-3.943 3.611-3.943h1.807c1.996 0 3.612 1.765 3.612 3.943z" />
  <path  fill="#FFF" d="M103.383 69.778c0 1.381-.836 2.499-1.871 2.499H58.487c-1.033 0-1.871-1.118-1.871-2.499 0-1.378.838-2.496 1.871-2.496h43.025c1.035 0 1.871 1.118 1.871 2.496z" />
  <path  fill="#595959" d="M120.098 92.09H39.903c-7.105 26.162-6.721 52.325 0 78.488h80.195c6.722-26.162 7.105-52.326 0-78.488z" />
</svg>

Note the class names, for example antenna-left . I have to modify this image with Adobe Illustrator, but when I save I have:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 250">
  <defs>
    <style>
      .a {
        fill: #5e5e5e;
      }

      .b {
        fill: #787878;
      }

      .c {
        fill: #595959;
      }

      .d {
        fill: #fff;
      }
    </style>
  </defs>
  <path d="M76.78,25.94c-.08-.81-2.19-20-22.87-21.93l.14-1.5C76,4.56,78.24,25.58,78.26,25.8Z" transform="translate(0 0)" />
  <ellipse  cx="55.02" cy="3.39" rx="3.34" ry="3.39" />
  <path d="M83.22,25.94c.08-.81,2.19-20,22.86-21.93L106,2.51C84,4.56,81.76,25.58,81.74,25.8Z" transform="translate(0 0)" />
  <ellipse  cx="104.98" cy="3.39" rx="3.35" ry="3.39" />
  <path  d="M59.72,72.78h40.56v27.56H59.72Z" transform="translate(0 0)" />
  <path  d="M96.08,32.57V24c-10.72-3.76-21.44-4-32.16,0v8.55Z" transform="translate(0 0)" />
  <path  d="M48.5,158.43H61.27v81.29H48.5Z" transform="translate(0 0)" />
  <path  d="M54.88,234.1c-9.52,0-17.24,7.11-17.24,15.9H72.13C72.13,241.21,64.41,234.1,54.88,234.1Z" transform="translate(0 0)" />
  <ellipse cx="54.88" cy="200.79" rx="9.29" ry="9.42" />
  <path  d="M60.61,203.82a6.43,6.43,0,0,1-8.72,2.77,6.59,6.59,0,0,1-2.73-8.83A6.43,6.43,0,0,1,57.88,195a6.59,6.59,0,0,1,2.73,8.83Z" transform="translate(0 0)" />
  <path  d="M98.73,158.43H111.5v81.29H98.73Z" transform="translate(0 0)" />
  <path  d="M105.11,234.1c9.53,0,17.25,7.11,17.25,15.9H87.87C87.87,241.21,95.59,234.1,105.11,234.1Z" transform="translate(0 0)" />
  <ellipse cx="105.11" cy="200.79" rx="9.29" ry="9.42" />
  <path  d="M99.39,203.82a6.43,6.43,0,0,0,8.72,2.77,6.59,6.59,0,0,0,2.73-8.83,6.42,6.42,0,0,0-8.71-2.77,6.58,6.58,0,0,0-2.74,8.83Z" transform="translate(0 0)" />
  <path  d="M38.29,95.94a60.68,60.68,0,0,0-20.42,18.85C5.22,133.09,3.41,154.26,7.26,176.25l10.42-1.87c-3.34-19-2.35-37,8.67-53.16A50,50,0,0,1,43.27,105.4Z" transform="translate(0 0)" />
  <path  d="M9.6,166.5A13.34,13.34,0,0,0,.49,182.9,13.19,13.19,0,0,0,7,191.07a6.83,6.83,0,0,1-.43-1.14c-1.23-4.49,1.7-9.24,6.56-10.61s9.81,1.14,11,5.63a7.22,7.22,0,0,1,.22,1.2,13.41,13.41,0,0,0,1.39-10.41A13.11,13.11,0,0,0,9.6,166.5Z" transform="translate(0 0)" />
  <ellipse cx="13.58" cy="132.93" rx="8.51" ry="8.62" />
  <path  d="M9.3,135.2a4.8,4.8,0,0,0,6.52,2.07,4.93,4.93,0,0,0,2-6.61,4.81,4.81,0,0,0-6.52-2.07A4.93,4.93,0,0,0,9.3,135.2Z" transform="translate(0 0)" />
  <path d="M42.36,94.05,34,92.8a47.81,47.81,0,0,0-4.69,32.25l8.34,1.25Z" transform="translate(0 0)" />
  <path  d="M121.71,95.94a60.68,60.68,0,0,1,20.42,18.85c12.65,18.3,14.46,39.47,10.61,61.46l-10.42-1.87c3.34-19,2.35-37-8.67-53.16a50,50,0,0,0-16.92-15.81l5-9.47Z" transform="translate(0 0)" />
  <path  d="M150.4,166.5a13.36,13.36,0,0,1,2.6,24.57,7.06,7.06,0,0,0,.43-1.14c1.23-4.49-1.7-9.24-6.56-10.61s-9.81,1.14-11,5.63a7.22,7.22,0,0,0-.22,1.2,13.46,13.46,0,0,1-1.4-10.41,13.12,13.12,0,0,1,16.18-9.24Z" transform="translate(0 0)" />
  <ellipse cx="146.42" cy="132.93" rx="8.51" ry="8.62" />
  <path  d="M150.7,135.2a4.8,4.8,0,0,1-6.52,2.07,4.93,4.93,0,0,1-2-6.61,4.8,4.8,0,0,1,6.52-2.07,4.93,4.93,0,0,1,2,6.61Z" transform="translate(0 0)" />
  <path d="M117.64,94.05,126,92.8a47.81,47.81,0,0,1,4.69,32.25l-8.34,1.25-4.69-32.25Z" transform="translate(0 0)" />
  <path  d="M112.81,28.37H47.19c-5.81,18.66-5.5,37.32,0,56h65.62C118.31,65.69,118.63,47,112.81,28.37Z" transform="translate(0 0)" />
  <path  d="M72.12,48c0,5.44-4.05,9.85-9,9.85h-2c-5,0-9-4.41-9-9.85s4-9.86,9-9.86h2C68.07,38.1,72.12,42.51,72.12,48Z" transform="translate(0 0)" />
  <path d="M66.61,48A3.79,3.79,0,0,1,63,51.9H61.19a4,4,0,0,1,0-7.89H63A3.79,3.79,0,0,1,66.61,48Z" transform="translate(0 0)" />
  <path  d="M107.92,48c0,5.44-4,9.85-9,9.85h-2c-5,0-9-4.41-9-9.85s4-9.86,9-9.86h2C103.88,38.1,107.92,42.51,107.92,48Z" transform="translate(0 0)" />
  <path d="M102.42,48a3.79,3.79,0,0,1-3.61,3.94H97A4,4,0,0,1,97,44h1.81A3.79,3.79,0,0,1,102.42,48Z" transform="translate(0 0)" />
  <path  d="M103.38,69.78c0,1.38-.83,2.5-1.87,2.5h-43c-1,0-1.87-1.12-1.87-2.5s.83-2.5,1.87-2.5h43C102.55,67.28,103.38,68.4,103.38,69.78Z" transform="translate(0 0)" />
  <path  d="M120.1,92.09H39.9c-7.1,26.16-6.72,52.32,0,78.49h80.2C126.82,144.42,127.2,118.25,120.1,92.09Z" transform="translate(0 0)" />
</svg>

and names of classes are not there anymore. How can I keep my initial classes?

EDIT: This is what is generated with the solution suggested in the comment:

   <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 160 250" style="enable-background:new 0 0 160 250;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:#5E5E5E;}
        .st1{fill:#787878;}
        .st2{fill:#595959;}
        .st3{fill:#FFFFFF;}
    </style>
    <path d="M76.8,25.9c-0.1-0.8-2.2-20-22.9-21.9l0.1-1.5c21.9,2,24.2,23.1,24.2,23.3C78.3,25.8,76.8,25.9,76.8,25.9z"/>
    <ellipse  cx="55" cy="3.4" rx="3.3" ry="3.4"/>
    <path d="M83.2,25.9c0.1-0.8,2.2-20,22.9-21.9l-0.1-1.5C84,4.6,81.8,25.6,81.7,25.8C81.7,25.8,83.2,25.9,83.2,25.9z"/>
    <ellipse  cx="105" cy="3.4" rx="3.3" ry="3.4"/>
    <path  d="M59.7,72.8h40.6v27.6H59.7V72.8z"/>
    <path  d="M96.1,32.6V24c-10.7-3.8-21.4-4-32.2,0v8.5H96.1z"/>
    <path  d="M48.5,158.4h12.8v81.3H48.5V158.4z"/>
    <path  d="M54.9,234.1c-9.5,0-17.2,7.1-17.2,15.9h34.5C72.1,241.2,64.4,234.1,54.9,234.1z"/>
    <ellipse cx="54.9" cy="200.8" rx="9.3" ry="9.4"/>
    <path  d="M60.6,203.8c-1.7,3.2-5.6,4.4-8.7,2.8c-3.2-1.7-4.4-5.6-2.7-8.8c1.7-3.2,5.6-4.4,8.7-2.8
        C61,196.7,62.3,200.6,60.6,203.8L60.6,203.8z"/>
    <path  d="M98.7,158.4h12.8v81.3H98.7V158.4z"/>
    <path  d="M105.1,234.1c9.5,0,17.2,7.1,17.2,15.9H87.9C87.9,241.2,95.6,234.1,105.1,234.1z"/>
    <ellipse cx="105.1" cy="200.8" rx="9.3" ry="9.4"/>
    <path  d="M99.4,203.8c1.7,3.2,5.6,4.4,8.7,2.8c3.2-1.7,4.4-5.6,2.7-8.8c-1.7-3.2-5.6-4.4-8.7-2.8
        C99,196.7,97.7,200.6,99.4,203.8L99.4,203.8z"/>
    <path  d="M38.3,95.9c-8.3,4.5-15.3,11.4-20.4,18.8C5.2,133.1,3.4,154.3,7.3,176.3l10.4-1.9c-3.3-19-2.4-37,8.7-53.2
        c4.2-6.2,10-12,16.9-15.8L38.3,95.9z"/>
    <path  d="M9.6,166.5c-7,2-11.1,9.3-9.1,16.4c1,3.5,3.3,6.5,6.5,8.2c-0.2-0.4-0.3-0.7-0.4-1.1c-1.2-4.5,1.7-9.2,6.6-10.6
        c4.9-1.4,9.8,1.1,11,5.6c0.1,0.4,0.2,0.8,0.2,1.2c1.9-3.1,2.4-6.9,1.4-10.4C23.8,168.7,16.6,164.5,9.6,166.5z"/>
    <ellipse cx="13.6" cy="132.9" rx="8.5" ry="8.6"/>
    <path  d="M9.3,135.2c1.2,2.4,4.2,3.3,6.5,2.1c2.4-1.3,3.3-4.2,2-6.6c-1.2-2.4-4.2-3.3-6.5-2.1
        C9,129.8,8.1,132.8,9.3,135.2z"/>
    <path d="M42.4,94L34,92.8c-5.2,10.2-7,20.9-4.7,32.2l8.3,1.2C37.7,126.3,42.4,94,42.4,94z"/>
    <path  d="M121.7,95.9c8.3,4.5,15.3,11.4,20.4,18.8c12.6,18.3,14.5,39.5,10.6,61.5l-10.4-1.9c3.3-19,2.4-37-8.7-53.2
        c-4.2-6.2-10-12-16.9-15.8L121.7,95.9L121.7,95.9z"/>
    <path  d="M150.4,166.5c7,2,11.1,9.3,9.1,16.4c-1,3.5-3.3,6.5-6.5,8.2c0.2-0.4,0.3-0.7,0.4-1.1c1.2-4.5-1.7-9.2-6.6-10.6
        c-4.9-1.4-9.8,1.1-11,5.6c-0.1,0.4-0.2,0.8-0.2,1.2c-1.9-3.1-2.4-6.9-1.4-10.4C136.2,168.7,143.4,164.5,150.4,166.5L150.4,166.5z"/>
    <ellipse cx="146.4" cy="132.9" rx="8.5" ry="8.6"/>
    <path  d="M150.7,135.2c-1.2,2.4-4.2,3.3-6.5,2.1c-2.4-1.3-3.3-4.2-2-6.6c1.2-2.4,4.2-3.3,6.5-2.1
        C151,129.8,151.9,132.8,150.7,135.2L150.7,135.2z"/>
    <path d="M117.6,94l8.3-1.2c5.2,10.2,7,20.9,4.7,32.2l-8.3,1.2L117.6,94L117.6,94z"/>
    <path  d="M112.8,28.4H47.2c-5.8,18.7-5.5,37.3,0,56h65.6C118.3,65.7,118.6,47,112.8,28.4z"/>
    <path  d="M72.1,48c0,5.4-4,9.9-9,9.9h-2c-5,0-9-4.4-9-9.9s4-9.9,9-9.9h2C68.1,38.1,72.1,42.5,72.1,48z"/>
    <path d="M66.6,48c0,2.2-1.6,3.9-3.6,3.9h-1.8c-2,0-3.6-1.8-3.6-3.9c0-2.2,1.6-3.9,3.6-3.9H63C65,44,66.6,45.8,66.6,48z"/>
    <path  d="M107.9,48c0,5.4-4,9.9-9,9.9h-2c-5,0-9-4.4-9-9.9s4-9.9,9-9.9h2C103.9,38.1,107.9,42.5,107.9,48z"/>
    <path d="M102.4,48c0,2.2-1.6,3.9-3.6,3.9H97c-2,0-3.6-1.8-3.6-3.9c0-2.2,1.6-3.9,3.6-3.9h1.8C100.8,44,102.4,45.8,102.4,48z"/>
    <path  d="M103.4,69.8c0,1.4-0.8,2.5-1.9,2.5h-43c-1,0-1.9-1.1-1.9-2.5c0-1.4,0.8-2.5,1.9-2.5h43
        C102.5,67.3,103.4,68.4,103.4,69.8z"/>
    <path  d="M120.1,92.1H39.9c-7.1,26.2-6.7,52.3,0,78.5h80.2C126.8,144.4,127.2,118.3,120.1,92.1z"/>
    </svg>

CodePudding user response：

Unfortunately, AI will strip your custom classes each time you rewrite/save your svg after editing.

I came up with this (admittedly pretty clunky) workaround using 2 helper functions:

svgClass2ID(svg): converts custom class names to IDs. IDs will be retained when opening your file in AI.
aiID2Class(svg): restores your classes by converting AI layer IDs to class names. You can "store" multiple classes.

This way you can set classes in AI by editing layer IDs.
Multiple class names are created by using '--' (2 hyphens) as a delimiter.

Example 1: prepare/optimize your svg for AI

Custom classes will be converted to IDs – check console for new svg markup.

const svgWeb = document.querySelector('#svgWeb');
svgClass2ID(svgWeb);


/**
 * svg classes to AI layer IDs:
 * run this once to store classnames in layer IDs before reediting in AI
 */
function svgClass2ID(svg) {
    let elements = [...svg.children];
    let svgClass = svg.getAttribute('class');
    let svgID = svg.id ? svg.id : svgClass.split(' ').join('--');
    let allIDs = [];
    let processed = 0;

    if (svgID) {
        svg.id = svgID;
    }

    if (elements.length) {
        elements.forEach(function (el, i) {
            let id = el.id;
            let className = el.getAttribute('class');
            let classList = className ? className.split(' ') : [];

            let newID = classList.join('--');
            if (allIDs.indexOf(newID) == -1) {
                allIDs.push(newID)
            } else {
                if(!id ){
                    console.log('id "'   newID   '" is not unique.');
                    // add index number to make id unique
                    classList[0] = classList[0]   '-'   i   '--'   classList[0];
                    newID = classList.join('--');
                }
            }

            // save classes in id attribute
            if (!id) {
                el.id = newID;
                processed  ;
            }
        })
        if(processed){
            let svgMarkup = svg.outerHTML;
            console.log(svgMarkup)
} 
        
    }
}

<p>Optimize SVG for editing in AI: <br />(Classes will be converted to IDs)</p>

<svg width="160" height="250" xmlns="http://www.w3.org/2000/svg" id="svgWeb" >
  <path  d="M76.782 25.942c-.08-.815-2.192-20-22.867-21.928l.137-1.501c21.916 2.044 24.19 23.07 24.21 23.283l-1.48.146z" />
  <ellipse  fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391" id="antenna-ball-left"></ellipse>
  <path  d="M83.217 25.942c.08-.815 2.192-20 22.867-21.928l-.137-1.501c-21.916 2.044-24.188 23.07-24.209 23.283l1.479.146z" />
  <ellipse  fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391" />
  <path  fill="#787878" d="M59.722 72.779h40.557v27.564H59.722z" />
  <path  fill="#787878" d="M96.079 32.57v-8.546c-10.72-3.765-21.437-3.98-32.156 0v8.546h32.156z" />
  <path  d="m42.356 94.049-8.341-1.248c-5.238 10.201-7.014 20.918-4.697 32.248l8.34 1.248 4.698-32.248z" />
  <path  d="m117.645 94.049 8.34-1.248c5.238 10.201 7.015 20.918 4.695 32.248l-8.339 1.248-4.696-32.248z" />
  <path  fill="#595959" d="M112.809 28.372H47.19c-5.814 18.663-5.499 37.322 0 55.983h65.621c5.498-18.661 5.814-37.32-.002-55.983z" />
  <path  fill="#FFF" d="M72.116 47.955c0 5.443-4.045 9.853-9.033 9.853h-1.971c-4.988 0-9.032-4.41-9.032-9.853s4.044-9.856 9.032-9.856h1.971c4.988 0 9.033 4.413 9.033 9.856z" />
  <path  d="M66.614 47.955c0 2.176-1.618 3.942-3.613 3.942h-1.807c-1.994 0-3.612-1.766-3.612-3.942 0-2.178 1.618-3.943 3.612-3.943H63c1.996 0 3.614 1.765 3.614 3.943z" />
  <path  fill="#FFF" d="M107.92 47.955c0 5.443-4.045 9.853-9.031 9.853h-1.973c-4.986 0-9.031-4.41-9.031-9.853s4.045-9.856 9.031-9.856h1.973c4.986 0 9.031 4.413 9.031 9.856z" />
  <path  d="M102.417 47.955c0 2.176-1.616 3.942-3.612 3.942h-1.807c-1.994 0-3.611-1.766-3.611-3.942 0-2.178 1.617-3.943 3.611-3.943h1.807c1.996 0 3.612 1.765 3.612 3.943z" />
  <path  fill="#FFF" d="M103.383 69.778c0 1.381-.836 2.499-1.871 2.499H58.487c-1.033 0-1.871-1.118-1.871-2.499 0-1.378.838-2.496 1.871-2.496h43.025c1.035 0 1.871 1.118 1.871 2.496z" />
  <path  fill="#595959" d="M120.098 92.09H39.903c-7.105 26.162-6.721 52.325 0 78.488h80.195c6.722-26.162 7.105-52.326 0-78.488z" />
</svg>

Example 2: restore classes after editing in AI

const svgAi = document.querySelector('#svgAi');
aiID2Class(svgAi);

/**
 *  convert AI layer Ids to svg classes
 *  run this convert layer IDs after svg was edited in AI and saved again 
 */
function aiID2Class(svg) {
    const elements = svg.querySelectorAll('[id]');
    let processed = 0;
    if (elements.length) {
        elements.forEach(function (el, i) {
            let id = el.id;
            //split ids with multiple classes seperated by '--' delimiter
            let idArr = id.split('--');
            let firstID = idArr[0];
            if(firstID){
                let idPrefix = firstID.replace(/[0-9]/g, '');
                //add classname prefix for indexed elements of same type 
                el.classList.add(idPrefix);
                el.classList.add(firstID);

            }

            if (idArr.length ) {
                let newClassNames = idArr.join(' ');
                el.classList.add(...idArr);
                processed  ;
            }
        })

        if(processed>0){
            let svgMarkup = svg.outerHTML;
            console.log(svgMarkup)
        }
    }
}

<p>SVG from Ai <br />
(Layer IDs will be converted to classes)</p>
<svg version="1.1" id="svgAi" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve">
<path id="antenna-left" d="M76.8,25.9c-0.1-0.8-2.2-20-22.9-21.9l0.1-1.5c21.9,2,24.2,23.1,24.2,23.3L76.8,25.9L76.8,25.9z"/>
<ellipse id="antenna-ball-left" fill="#5E5E5E" cx="55" cy="3.4" rx="3.3" ry="3.4"/>
<path id="antenna-right" d="M83.2,25.9c0.1-0.8,2.2-20,22.9-21.9l-0.1-1.5C84,4.6,81.8,25.6,81.7,25.8L83.2,25.9L83.2,25.9z"/>
<ellipse id="antenna-ball-right" fill="#5E5E5E" cx="105" cy="3.4" rx="3.3" ry="3.4"/>
<path id="neck" fill="#787878" d="M59.7,72.8h40.6v27.6H59.7V72.8z"/>
<path id="top-of-head" fill="#787878" d="M96.1,32.6V24c-10.7-3.8-21.4-4-32.2,0v8.5H96.1z"/>
<path id="arm-attachment-left" d="M42.4,94L34,92.8c-5.2,10.2-7,20.9-4.7,32.2l8.3,1.2L42.4,94L42.4,94z"/>
<path id="arm-attachment-right" d="M117.6,94l8.3-1.2c5.2,10.2,7,20.9,4.7,32.2l-8.3,1.2L117.6,94L117.6,94z"/>
<path id="head" fill="#595959" d="M112.8,28.4H47.2c-5.8,18.7-5.5,37.3,0,56h65.6C118.3,65.7,118.6,47,112.8,28.4L112.8,28.4z"/>
<path id="eyeball-left-outside" fill="#FFFFFF" d="M72.1,48c0,5.4-4,9.9-9,9.9h-2c-5,0-9-4.4-9-9.9s4-9.9,9-9.9h2
    C68.1,38.1,72.1,42.5,72.1,48z"/>
<path id="eyeball--eyeball-left-inside" d="M66.6,48c0,2.2-1.6,3.9-3.6,3.9h-1.8c-2,0-3.6-1.8-3.6-3.9c0-2.2,1.6-3.9,3.6-3.9H63
    C65,44,66.6,45.8,66.6,48z"/>
<path id="eyeball-right-outisde" fill="#FFFFFF" d="M107.9,48c0,5.4-4,9.9-9,9.9h-2c-5,0-9-4.4-9-9.9s4-9.9,9-9.9h2
    C103.9,38.1,107.9,42.5,107.9,48z"/>
<path id="eyeball--eyeball-right-inside" d="M102.4,48c0,2.2-1.6,3.9-3.6,3.9H97c-2,0-3.6-1.8-3.6-3.9c0-2.2,1.6-3.9,3.6-3.9h1.8
    C100.8,44,102.4,45.8,102.4,48z"/>
<path id="mouth" fill="#FFFFFF" d="M103.4,69.8c0,1.4-0.8,2.5-1.9,2.5h-43c-1,0-1.9-1.1-1.9-2.5c0-1.4,0.8-2.5,1.9-2.5h43
    C102.5,67.3,103.4,68.4,103.4,69.8z"/>
<path id="body" fill="#595959" d="M120.1,92.1H39.9c-7.1,26.2-6.7,52.3,0,78.5h80.2C126.8,144.4,127.2,118.3,120.1,92.1L120.1,92.1z
    "/>
</svg>

Codepen (with download option)

CodePudding user response：

So if all you need is to replace 'id' to 'class' and back, it can be done pretty easy with Extendscript.

The first script opens your svg file, replaces 'class' to 'id', adds to the file name '_id' and saves the new svg file into the same folder:

var file = File.openDialog();
if (file) {
    file.open('r');
    var contents = file.read();
    file.close();

    contents = contents.replace(/');

    var new_file_name = file.fullName.replace(/\.svg$/, '_id.svg');
    var new_file = File(new_file_name);
    new_file.open('w');
    new_file.write(contents);
    new_file.close();
}

The second script makes vice versa: replaces 'id' with 'class', adds '_class' to the file name and saves the file into the same folder.

var file = File.openDialog();
if (file) {
    file.open('r');
    var contents = file.read();
    file.close();

    contents = contents.replace(/id="/g, '/g, 'id="');
    // or 
    // contents = contents.replace(/id="/g, 'class="');

    file.open('w');
    file.write(contents);
    file.close();
}