Como exportar um arquivo .svg do Adobe Illustrator com IDs de forma?

Minha pergunta é muito simples.

Como exportar um arquivo SVG do Adobe Illustrator com IDs de forma? Quando eu exporto como SVG, os nomes de meus grupos se voltam para grupos com nome de grupo como ID, esse é o comportamento que eu esperaria de formas também, mas minhas formas obtêm apenas uma ID aleatória em vez de seu nome ...

exemplo da saída desejada:

<g id="liikkeet">
        <polygon id="s281" style="fill:#ED3B95;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" points="157,515.3 157,408.3     180,385.1 180,369.3 248,369.3 248,391.3 266,391.3 266,402.3 393,402.3 393,513.3   "/>
</g>

O que estou fazendo errado? Atualmente, recebo polígonos e caminhos sem IDs, embora os tenha nomeado no Illustrator.

Sentindo sua dor. Resposta curta: A exportação de AI SVG é (um) dos motivos pelos quais eu preciso de terapia.

Resposta longa: eu exportei com sucesso o SVG do AI (CS6) com IDs. Ver abaixo:

Torna-se em:

<g id="ZONES">
<path id="Zone3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M756.485,373.758l-1.764,8.361l16.43,3.908l-0.426,2.34
    l6.586,1.164l0.533-2.439l26.047,5.664L789.667,464.4l-10.812-2.232l-3.975,18.355l11.258,2.34l-5.574,26.797l-1.59-0.379
    l-13,69.334l11.33,2.646l1.67-8.312l37.164-186.996L756.485,373.758z M558.887,341.28l92.963,19.719l-0.625,6.619l18.766,3.914
    l2.24-6.494l57.076,11.744l1.832-9.164l-170.873-34.653L558.887,341.28z"/>
<path id="Zone4" fill="none" stroke="#000000" stroke-miterlimit="10" d="M434.33,427.335c-0.429-1.498-0.982-3.717-1.175-5.787
    c-0.233-2.526-0.146-5.851-0.074-7.606l0.062-1.478l-24.606-1.399l-88.614-59.936l-23.902,34.039l-11.858,17.166l38.417,25.742
    L316.31,543.08l14.66,0.7l4.754-102.191l48.545-14.975l50.645,2.746L434.33,427.335z"/>
<polygon id="Zone8" fill="none" stroke="#000000" stroke-miterlimit="10" points="675.512,441.043 661.075,418.389 
    670.225,371.531 651.227,367.615 641.927,414.635 619.298,429.342 551.059,415.363 546.972,433.756 774.876,480.521 778.86,462.17 
        "/>

Alguns problemas:

• às vezes a IA apenas adiciona uma string aleatória a esse id ... evite o caractere sublinhado, é o que posso dizer com certeza.
• esteja preparado para que alguns deles se tornem caminhos e outros se tornem polígonos, como você vê acima. Portanto, se você estiver manipulando todos de uma vez, atribua a todos uma classe de "thisIsOneOfMyZones", por exemplo, usando jQuery. Esse truque é o melhor que eu criei até agora. Compartilhe se você hackear o segredo da escolha de caminhos / polígonos na exportação.
• Possivelmente, atribuir um ID ao grupo pai afetará a maneira como os IDs do nó filho são traduzidos na exportação SVG. Isso é necessário de qualquer maneira, ou pelo menos conveniente, se você quiser manipulá-los programaticamente, o que eu acho que você está fazendo :)

Para atribuir IDs a grupos e caminhos, é necessário dar nomes a eles no Illustrator. Portanto, se você tiver uma camada chamada my_layer e um caminho chamado my_path no Illustrator e salvá-los como um svg, obterá:

<g id='my_layer'>
 <path id='my_path' d='...#coordinates...' />
</g>

Se você não nomear seu caminho no Illustrator, ele será salvo com um ID aleatório. Se você nomear o caminho e a camada com o mesmo nome, o Illustrator precisará alterar um deles, pois os IDs devem ser exclusivos.

Parece que você está se referindo a um exemplo de código como este:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
    <path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
        c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
        s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
    <circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
<g id="Layer_3">
</g>
</svg>

Quando você menciona "exportar com IDs de forma" para resultar <g id="Layer_1">, aconselho colocar uma forma em cada camada nomeada e salvá-la como SVG. Referência: " Fiz um mapa no AI, mas o tamanho do arquivo é ENORME como um svg? "

Você sempre pode exportar o código e entrar em um editor de código e modificar os IDs.

Este:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
        <g id="jjjuho">
            <polygon id="manItsMonday" style="fill:#ED3B95;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" points="157,515.3 157,408.3180,385.1 180,369.3 248,369.3 248,391.3 266,391.3 266,402.3 393,402.3 393,513.3   "/>
        </g>    
    </svg>
</div>

Renderiza:

Além de identificar o nome da camada, conforme observado acima, achei útil converter minhas formas em caminhos compostos.

Isso converterá polígonos em caminhos, o que pode tornar as coisas um pouco mais uniformes para o seu CSS.

No Illustrator: Objeto> Caminho composto> Criar