Exportieren Sie SVG aus Illustrator einschließlich Objekten außerhalb der Zeichenfläche

Ich versuche, ein SVG für eine Website zu erstellen, dieses SVG wird später animiert (mit CSS und einem Plugin, das den Ärger beseitigt).

Die Zeichenfläche hat die Größe der Ansicht für den Benutzer, es gibt andere Elemente in der .ai-Datei, die animiert und später sichtbar sind.

Wie speichere ich meine Illustration mit Illustrator als SVG, ohne Objekte zu verlieren, die sich außerhalb meiner Zeichenfläche befinden?

Eine visuelle Darstellung, wie die Zeichenfläche aussieht:Eine visuelle Darstellung dessen, wie die Zeichenfläche aussieht

Eine visuelle Darstellung, wie der aktuelle Export aussieht:Eine visuelle Darstellung des aktuellen Exports

Das gewünschte Ergebnis ist eine .svg-Datei mit demselben Inhalt wie die .ai-Datei

Was ist, wenn du es versuchst File > Export...oder File > Export selection...?
Die Grafikgrenzen wurden entfernt, das heißt, ich habe kein Fenster für das, was der Benutzer sehen soll. Ich könnte dies lösen, indem ich einen Wrapper auf der Website habe, aber dann muss die Berechnung der Elementgröße entweder mit calc() oder js erfolgen, dies reduziert die Browserunterstützung. (Außerdem gibt es kein Fallback)
Handelt es sich bei dem Bildmaterial, das beschnitten wird, um eine einzelne Form oder um mehrere? Wenn es sich um mehrere Formen handelt, werden sie gruppiert?
Mehrere Formen (Hunderte), sie werden als ein Objekt gruppiert, pro Stück und pro Objekt
Die Begrenzungen werden nicht entfernt, wenn Sie Auswahl exportieren verwenden. Es wird nur an das/die ausgewählte(n) Objekt(e) angepasst.
Warum nicht die Größe der Zeichenfläche ändern?

Antworten (2)

Die Lösung hat Use Artboardsbeim Speichern das Kontrollkästchen deaktiviert. Dies war verwirrend, da Sie in fast jedem Tutorial lernen, es für die Verwendung im Web zu aktivieren.

Use artboardsfunktioniert so, als ob Sie die Zeichenfläche als Hintergrund verwenden würden, dh wenn Sie möchten, dass das Bild mit einem bestimmten Verhältnis exportiert wird. Das macht es großartig für Webdesign, kann aber manchmal mühsam sein, wenn ich im Allgemeinen aus AI exportiere und in Photoshop nachbessere

Sie müssen nicht die Benutzeransicht exportieren, sondern das gesamte .svg-Objekt.

Der Code befasst sich mit dem, was der Benutzer sehen wird, sogar mit Animationen.