¿Cómo exportar un archivo .svg de Adobe Illustrator con ID de formas?

Sintiendo tu dolor. Respuesta corta: la exportación AI SVG es (una de) las razones por las que necesito terapia.

Respuesta larga: he exportado con éxito SVG de AI (CS6) con id. Vea abajo:

Se convierte en:

<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 
        "/>

Sin embargo, algunos problemas:

• a veces AI simplemente agrega una cadena aleatoria a esa identificación ... evite el carácter de subrayado, es lo que puedo decir con certeza.
• prepárate para que algunos de estos se conviertan en caminos y otros en polígonos, como ves arriba. Entonces, si los está manipulando todos a la vez, asígneles a todos una clase de "thisIsOneOfMyZones", por ejemplo, usando jQuery. Ese truco es lo mejor que he encontrado hasta ahora. Comparta si piratea el secreto de la elección de rutas/polígonos en la exportación.
• Posiblemente, dar una identificación al grupo principal afectará la forma en que se traducen las identificaciones del nodo secundario en la exportación SVG. Eso es necesario de todos modos, o al menos conveniente si desea manipularlos mediante programación, lo que supongo que está haciendo :)

Para otorgar ID a grupos y rutas, debe asignarles nombres en Illustrator. Entonces, si tiene una capa llamada my_layer y una ruta llamada my_path en Illustrator y las guarda como un svg, obtendrá:

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

Si no nombra su ruta en Illustrator, la guardará con una identificación aleatoria. Si nombra la ruta y la capa con el mismo nombre, Illustrator tendrá que cambiar uno de ellos, ya que las identificaciones deben ser únicas.

Parece que te estás refiriendo a un ejemplo 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>

Cuando mencione "exportar con ID de formas" para obtener resultados, <g id="Layer_1">le recomendaría colocar una forma en cada capa nombrada y guardarla como SVG. Referencia: " Hice un mapa en AI, pero el tamaño del archivo es ENORME como un svg? "

Siempre puede exportar el código e ir a un editor de código y modificar las ID.

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>

Renders:

Además de identificar con el nombre de la capa como se indicó anteriormente, he descubierto que es útil convertir mi forma o formas en trazados compuestos.

Esto convertirá los polígonos en rutas, lo que puede hacer que las cosas sean un poco más uniformes para su CSS.

En Illustrator: Objeto> Trazado compuesto> Hacer