'Adobe Illustratore delete my class names on svg images. How can I prevent this?
I have this svg image:
<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>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 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>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 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>Solution 1:[1]
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" 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>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>Solution 2:[2]
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(/class="/g, 'id="');
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, 'class="');
var new_file_name = file.fullName.replace(/(_id\.svg|\.svg)$/, '_class.svg');
var new_file = File(new_file_name);
new_file.open('w');
new_file.write(contents);
new_file.close();
}
If you feel brave enough you can save the updated contents into the same svg file with no backups, like this:
var file = File.openDialog();
if (file) {
file.open('r');
var contents = file.read();
file.close();
contents = contents.replace(/class="/g, 'id="');
// or
// contents = contents.replace(/id="/g, 'class="');
file.open('w');
file.write(contents);
file.close();
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | herrstrietzel |
| Solution 2 |