Wie exportiere ich eine .svg-Datei aus Adobe Illustrator mit Form-IDs?

Deinen Schmerz spüren. Kurze Antwort: Der AI-SVG-Export ist (einer der) Gründe, warum ich eine Therapie brauche.

Lange Antwort: Ich habe erfolgreich SVG aus AI (CS6) mit IDs exportiert. Siehe unten:

Verwandelt sich in:

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

Ein paar Probleme allerdings:

• Manchmal fügt AI dieser ID einfach eine zufällige Zeichenfolge hinzu. Vermeiden Sie den Unterstrich, kann ich mit Sicherheit sagen.
• Seien Sie darauf vorbereitet, dass einige davon zu Pfaden und einige zu Polygonen werden, wie Sie oben sehen. Wenn Sie also alle auf einmal manipulieren, weisen Sie ihnen allen die Klasse „thisIsOneOfMyZones“ zu, zum Beispiel mit jQuery. Dieser Hack ist der beste, der mir bisher eingefallen ist. Bitte teilen Sie, wenn Sie das Geheimnis der Pfad-/Polygonauswahl im Export knacken.
• Möglicherweise wirkt sich die Angabe einer ID für die übergeordnete Gruppe darauf aus, wie die IDs der untergeordneten Knoten im SVG-Export übersetzt werden. Das ist sowieso erforderlich oder zumindest praktisch, wenn Sie diese programmgesteuert manipulieren möchten, was ich vermute, dass Sie das tun :)

Um Gruppen und Pfaden IDs zuzuweisen, müssen Sie ihnen in Illustrator Namen geben. Wenn Sie also in Illustrator eine Ebene namens my_layer und einen Pfad namens my_path haben und diese als SVG speichern, erhalten Sie Folgendes:

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

Wenn Sie Ihren Pfad in Illustrator nicht benennen, wird er mit einer zufälligen ID gespeichert. Wenn Sie den Pfad und die Ebene mit demselben Namen benennen, muss Illustrator eine davon ändern, da die IDs eindeutig sein müssen.

Klingt so, als ob Sie sich auf ein Codebeispiel wie dieses beziehen:

<?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>

Wenn Sie "Exportieren mit Form-IDs" als Ergebnis erwähnen, <g id="Layer_1">würde ich empfehlen, eine Form auf jeder benannten Ebene zu platzieren und sie als SVG zu speichern. Referenz: „ Ich habe eine Karte in AI erstellt, aber die Dateigröße ist RIESIG als SVG? “

Sie könnten den Code jederzeit exportieren und in einen Code-Editor gehen und die IDs ändern.

Dies:

<?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>

Rendert:

Zusätzlich zum IDing mit dem Ebenennamen, wie oben erwähnt, habe ich festgestellt, dass es nützlich ist, meine Form/en in zusammengesetzte Pfade umzuwandeln.

Dadurch werden Polygone in Pfade konvertiert, was die Dinge für Ihr CSS etwas einheitlicher machen kann.

In Illustrator: Objekt> Zusammengesetzter Pfad> Erstellen