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

Meine Frage ist sehr einfach.

Wie exportiere ich eine SVG-Datei aus Adobe Illustrator mit Form-IDs? Wenn ich als SVG exportiere, werden meine Gruppennamen zu Gruppen mit Gruppennamen als ID. Dies ist das Verhalten, das ich auch von Formen erwarten würde, aber meine Formen erhalten nur eine zufällige ID anstelle ihres Namens ...

Beispiel für die gewünschte Ausgabe:

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

Was mache ich falsch? Derzeit erhalte ich Polygone und Pfade ohne IDs, obwohl ich sie in Illustrator benannt habe.

Fühle deinen Schmerz. Kurze Antwort: Der Export von AI SVG ist einer der Gründe, warum ich eine Therapie benötige.

Lange Antwort: Ich habe SVG erfolgreich 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:

• 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 andere zu Polygonen werden, wie Sie oben sehen. Wenn Sie sie also alle gleichzeitig bearbeiten, weisen Sie ihnen alle eine Klasse von "thisIsOneOfMyZones" zu, beispielsweise mit jQuery. Dieser Hack ist der beste, den ich mir bisher ausgedacht habe. Bitte teilen Sie, wenn Sie das Geheimnis der Auswahl von Pfaden / Polygonen beim Export hacken.
• Möglicherweise wirkt sich die Angabe einer ID für die übergeordnete Gruppe darauf aus, wie die IDs des untergeordneten Knotens im SVG-Export übersetzt werden. Das ist sowieso nötig oder zumindest praktisch, wenn Sie diese programmgesteuert manipulieren möchten, was Sie vermutlich tun :)

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

<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 würden Sie sich auf ein Codebeispiel wie das folgende 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 "Export mit Form-IDs" als Ergebnis erwähnen, <g id="Layer_1">würde ich empfehlen, auf jeder benannten Ebene eine Form zu platzieren und diese als SVG zu speichern. Referenz: " Ich habe eine Karte in AI erstellt, aber die Dateigröße ist als SVG RIESIG? "

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

Diese:

<?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 zur IDierung mit dem Ebenennamen wie oben angegeben habe ich festgestellt, dass es nützlich ist, meine Form (en) in zusammengesetzte Pfade umzuwandeln.

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

In Illustrator: Objekt> Zusammengesetzter Pfad> Erstellen