Warum werden meine Elemente verschoben, nachdem sie in svg exportiert wurden

Ich bin ziemlich neu in Adobe Illustrator, aber an PS gewöhnt.

Ich wollte mit Illustrator experimentieren, um SVGs zu erstellen, die dann mit JavaScript bearbeitet werden können.

Ich habe eine Art Hintergrundebene erstellt und diese mit einem Rechteck gefüllt. Das hat ein Muster als Hintergrundbild (Adobes Waffelmuster - Doppelt ).

Ich habe dann eine zweite Ebene erstellt und ihr mehrere gefüllte Pfade hinzugefügt. Ich habe versucht, diese Pfade so gut wie möglich auf das Hintergrundmuster meiner ersten Ebene auszurichten.

Wenn ich meine Grafik als SVG exportiere, werden meine Pfade nicht wie in Illustrator am Hintergrund ausgerichtet. Es scheint, dass sie ein wenig nach rechts verschoben sind. Auch wenn ich in Firefox (STRG, +) zoome, wird die Diskrepanz noch größer.

Warum ist das so und wie kann man es verhindern? Gibt es so etwas wie relative und absolute Positionierung?

Versuchen Sie, ein nicht formatiertes ("unsichtbares") Rechteck (die genauen Abmessungen und die Platzierung wie das Objekt der Hintergrundebene) auf derselben Ebene wie die zweite Ebene zu platzieren. Eventuell sind dann Herkunft und Fenstergröße der beiden SVG-Dateien gleich.

Antworten (3)

Versuchen Sie, beim Speichern "Illustrator-Bearbeitungsfunktionen beibehalten" zu aktivieren, das Problem sollte behoben werden.

Stellen Sie außerdem sicher, dass:

  • "Responsive" ist nicht aktiviert
  • Ihr Kunstwerk ist nicht größer als Ihre Leinwand
  • Die Größe Ihrer Leinwand enthält keine Dezimalwerte

Ich verwende Illustrator, um .svg für das Web zu generieren, und es funktioniert ziemlich gut.

Illustrator als Popup speichern

Als jemand, der ziemlich viel Arbeit mit der Codierung von SVGs geleistet hat, die aus exportiert wurden AI( Ein Beispiel ), kann ich sagen, dass das Problem darin besteht, dass AI SVGs nicht in einem Format exportiert, das für das Web geeignet ist. Zumindest nicht vollständig.

Bei der Verwendung von SVGs, die mit KI erstellt wurden, musste ich Positionen immer etwas massieren, um die Proportionen beizubehalten, die ursprünglich beim Zeichnen auf KI gesehen wurden. Was Pfade / Farbverläufe anbelangt, habe ich keine Möglichkeit gefunden, dies aus AI zu exportieren, um es in einem Browser nachzuahmen.

Am Ende besteht der einzige WIRKLICHE Vorteil für die Entwicklung Ihrer SVGs in KI darin, Ihre Koordinaten zu erhalten. Tut mir leid, wenn Sie das nicht hören wollten, aber ich habe fast 2 Wochen damit verbracht, den Exportprozess mit professionellen KI-Benutzern (5+ Jahre) zu optimieren, und das Beste, was wir bekommen haben - einfarbig gefüllte Polygone/Linien/Kreise/usw., Dh SVG-Wireframes, die (mit einer gewissen Fehlerspanne) mit dem übereinstimmten, was auf AI war.

Sollte der letzte Satz nicht enden?
@Johannes du hast absolut recht... Korrigiert.
Es brachte mich nur zum Lachen, als ich es las, kein Problem!
Wenn dich mein versehentlicher Fehler zum Lachen gebracht hat - ich bin froh, dass ich es damals gemacht habe :D. Prost!

Anstatt als .svg zu speichern, versuchen Sie stattdessen, als .svg zu exportieren. Bei mir hat es funktioniert!