css - Adobe Illustrator 删除了我在 svg 图像上的类名。我怎样才能防止这种情况发生？

Question

我有这张 svg 图片:

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

  <path class="antenna-left" 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 class="antenna-ball-left" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391" />
  <path class="antenna-right" 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 class="antenna-ball-right" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391" />
  <path class="neck" fill="#787878" d="M59.722 72.779h40.557v27.564H59.722z" />
  <path class="top-of-head" fill="#787878" d="M96.079 32.57v-8.546c-10.72-3.765-21.437-3.98-32.156 0v8.546h32.156z" />
  <path class="leg-left" fill="#787878" d="M48.499 158.432H61.27v81.291H48.499z" />
  <path class="foot-left" 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 class="kneecap-left-outside" cx="54.885" cy="200.79" rx="9.294" ry="9.423" />
  <path class="kneepcap-left-inside" 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 class="leg-right" fill="#787878" d="M98.729 158.432H111.5v81.291H98.729z" />
  <path class="foot-right" 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 class="kneepcap-right-outisde" cx="105.113" cy="200.79" rx="9.295" ry="9.423" />
  <path class="kneecap-right-inside" 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 class="arm-left" 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 class="hand-left" 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 class="elbox-left-outside" cx="13.581" cy="132.93" rx="8.505" ry="8.623" />
  <path class="elbow-left-inside" 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 class="arm-attachment-left" 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 class="arm-right" 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 class="hand-right" 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 class="elbox-right-outside" cx="146.419" cy="132.93" rx="8.505" ry="8.623" />
  <path class="elbow-right-inside" 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 class="arm-attachment-right" 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 class="head" 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 class="eyeball-left-outside" 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 class="eyeball-left-inside" 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 class="eyeball-right-outisde" 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 class="eyeball-right-inside" 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 class="mouth" 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 class="body" 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>

注意类名，例如 antenna-left 。我必须使用 Adob​​e Illustrator 修改此图像，但在保存时我有:

<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 class="a" 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 class="a" cx="104.98" cy="3.39" rx="3.35" ry="3.39" />
  <path class="b" d="M59.72,72.78h40.56v27.56H59.72Z" transform="translate(0 0)" />
  <path class="b" d="M96.08,32.57V24c-10.72-3.76-21.44-4-32.16,0v8.55Z" transform="translate(0 0)" />
  <path class="b" d="M48.5,158.43H61.27v81.29H48.5Z" transform="translate(0 0)" />
  <path class="c" 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 class="b" 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 class="b" d="M98.73,158.43H111.5v81.29H98.73Z" transform="translate(0 0)" />
  <path class="c" 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 class="b" 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 class="b" 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 class="c" 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 class="b" 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 class="b" 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 class="c" 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 class="b" 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 class="c" 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 class="d" 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 class="d" 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 class="d" 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 class="c" 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>

类名不再存在。我怎样才能保留我的初始类(class)？

编辑:这是评论中建议的解决方案生成的内容:

   <?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 class="st0" 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 class="st0" cx="105" cy="3.4" rx="3.3" ry="3.4"/>
    <path class="st1" d="M59.7,72.8h40.6v27.6H59.7V72.8z"/>
    <path class="st1" d="M96.1,32.6V24c-10.7-3.8-21.4-4-32.2,0v8.5H96.1z"/>
    <path class="st1" d="M48.5,158.4h12.8v81.3H48.5V158.4z"/>
    <path class="st2" 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 class="st1" 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 class="st1" d="M98.7,158.4h12.8v81.3H98.7V158.4z"/>
    <path class="st2" 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 class="st1" 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 class="st1" 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 class="st2" 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 class="st1" 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 class="st1" 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 class="st2" 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 class="st1" 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 class="st2" 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 class="st3" 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 class="st3" 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 class="st3" 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 class="st2" 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>

Answer 1

不幸的是，每次您在编辑后重写/保存 svg 时，AI 都会删除您的自定义类。

我使用 2 个辅助函数想出了这个(诚然相当笨拙)的解决方法:

1. svgClass2ID(svg):将自定义类名转换为 ID。在 AI 中打开文件时将保留 ID。
2. aiID2Class(svg):通过将 AI 层 ID 转换为类名来恢复您的类。您可以“存储”多个类。

这样您就可以通过编辑图层 ID 在 AI 中设置类。
使用“--”(2 个连字符)作为分隔符创建多个类名。

示例 1:为 AI 准备/优化您的 svg

自定义类将被转换为 ID——检查控制台是否有新的 svg 标记。

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" class="sovog">
  <path class="antenna-left" 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 class="antenna-ball-left" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391" id="antenna-ball-left"></ellipse>
  <path class="antenna-right" 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 class="antenna-ball-right" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391" />
  <path class="neck" fill="#787878" d="M59.722 72.779h40.557v27.564H59.722z" />
  <path class="top-of-head" fill="#787878" d="M96.079 32.57v-8.546c-10.72-3.765-21.437-3.98-32.156 0v8.546h32.156z" />
  <path class="arm-attachment-left" 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 class="arm-attachment-right" 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 class="head" 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 class="eyeball-left-outside" 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 class="eyeball-left-inside" 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 class="eyeball-right-outisde" 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 class="eyeball-right-inside" 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 class="mouth" 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 class="body" 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>

示例2:在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)