Der SVG-Export aus Illustrator CC verzerrt Pfade

8

Ich versuche, einige Symbole zu erstellen, die der Glyphicons-Bibliothek hinzugefügt werden sollen.

Ich habe sie mit dem Stiftwerkzeug (Formen) in Adobe Illustrator CC erstellt. Sie sind äußerst einfach. Als PNG oder EPS exportieren sie gut. Leider brauche ich den SVG-Export, um ihn mit Glyphicons verwenden zu können.

Wenn ich nach SVG exportiere, scheinen sich die Formen zu bewegen. Zumindest bleiben sie nicht so, wie sie auf meinem Bildschirm erscheinen.

Wie kann ich sie so erscheinen lassen, wie sie es im Illustrator tun?

Dies ist ein PNG von innen Illustrator. Geben Sie hier die Bildbeschreibung ein

Dies ist ein PNG aus der Vorschau, dies ist das SVG. Die Formen sind deutlich unterschiedlich angeordnet.

Offensichtlich werden die Formen nach dem Export falsch ausgerichtet. Gibt es offensichtliche Gründe dafür? Alle meine Exporteinstellungen sind als Standard festgelegt.

adobe-illustrator svg cc-2014 Andrew Peachey
quelle
Könnten Sie einige detaillierte Informationen darüber geben, wie die Geometrie für ein Bild erstellt wird, in dem alle Objekte ausgewählt sind, um die Anker zu sehen? Verwenden Sie auch für runde Zahlen Gitter
joojaa

Antworten:

15

Ändern Sie "Dezimalstellen" im Dialogfeld "SVG-Optionen" in 3, das beim Speichern als SVG angezeigt wird:

Bildschirmfoto

Vic
quelle
1

Dies ist ein häufiger Fehler in der .SVG-Datei. Dies liegt daran, dass harte Kurven (Kurven mit nur zwei Ankern und langen Griffen) vom Browser nicht gut wiedergegeben werden können.

Am besten teilen Sie Ihren Pfad in kleinere Segmente auf, insbesondere um den Anker herum, bei dem das Problem auftritt.

Geh einfach zu Object > Path > Add Anchor Points

hsawires
quelle
Das schien überhaupt keine Wirkung zu haben. Außerdem habe ich irgendwo gelesen, dass Sie versuchen sollten, die minimal mögliche Anzahl von Ankerpunkten beizubehalten, um die Ladezeiten für das mobile Rendern von SVG zu verbessern. Ist das totaler Unsinn oder ist es eine Art Balanceakt?
Andrew Peachey
0

Ich neige dazu, die besten Ergebnisse mit meinen SVG-Speicherungen zu erzielen, wenn die Koordinaten meiner Objekte saubere Dezimalwerte haben. Beispielsweise würde ein Objekt bei X = 100,452 auf X = 100,5 verschoben. Ich habe leichte Bewegungen ähnlich Ihrem Problem erlebt, als ich Objekte an Koordinaten mit unordentlichen Bruchteilen belassen habe.

Alan
quelle
Interessant, wie erreichen Sie das? Muss ein richtiger Schmerz sein, um Dinge so genau zu positionieren?
Andrew Peachey
@ AndrewPeachey Es ist nicht sehr schwierig. Klicken Sie einfach auf das Objekt und klicken Sie auf die Aufwärts- oder Abwärtspfeile neben der Position, um zur nächsten Zahl zu gelangen.
Alan
Ah. Na sicher. Macht Sinn. Prost, wird untersuchen.
Andrew Peachey
Wenn Sie ein SVG animieren, beschleunigt dies die Sache und hält sie auf einem Pixel. Für Computer ist es schwieriger, Gleitkommazahlen zu ermitteln. Und es ist schwieriger für Displays zu erraten, ob es 1 Pixel nach links oder rechts sollte.
Lex
0

Lösung gefunden.

Dies ist eindeutig nicht die beste, sauberste und schönste Lösung, aber sie funktioniert außergewöhnlich gut.

Mein Prozess:
1. Zeichnen Sie das Symbol in Illustrator.
2. Speichern Sie es als .ai-Datei.
3. Öffnen Sie .ai in OSX iDraw.
4. Exportieren Sie es von iDraw nach SVG

Einfache Lösung:
1. Zeichnen Sie das Symbol in iDraw.
2. Exportieren Sie es von iDraw nach SVG

Ich hoffe das hilft anderen Leuten

Andrew Peachey
quelle
0

Ich hatte auch Probleme beim Exportieren und habe versucht:

File> Save as

anstatt:

File> Export> Export as.

Und das schien den Trick zu tun!

Kirrilee
quelle
-1

Da ich dieses Problem entdecke, tritt es nur auf, wenn Sie "nur ausgewählt" exportieren. Wenn Exporteure keine Ränder (Seite) sehen, stimmt etwas nicht mit Kurven.

Daniel UU
quelle