Der SVG-Export aus Illustrator CC verzerrt Pfade

Ich versuche, einige Symbole zu erstellen, um sie der Glyphicons-Bibliothek hinzuzufügen.

Ich habe sie mit dem Stiftwerkzeug (Formen) in Adobe Illustrator CC erstellt, sie sind sehr einfach. Als PNG oder EPS exportieren sie problemlos. Leider brauche ich den SVG-Export, um ihn mit Glyphicons zu verwenden.

Wenn ich in 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 in Illustrator tun?

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

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

Die Formen werden nach dem Export eindeutig falsch ausgerichtet. Gibt es dafür offensichtliche Gründe? Alle meine Exporteinstellungen sind als Standard eingestellt.

könnten Sie einige detaillierte Informationen darüber geben, wie die Geometrie erstellt wird, um ein Bild zu erhalten, in dem alle Objekte ausgewählt sind, um die Anker zu sehen. Verwenden Sie auch für runde Zahlen ein Raster
Danke für das Aufwerfen der Frage! Ich litt darunter

Antworten (6)

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

Bildschirmfoto

Es ist Arbeit wie Charme!!! Cooler Mann
DANKE!!! Warum um alles in der Welt sollte Adobe denken, dass 1 Dezimalstelle alles ist, was Sie brauchen?!

Dies ist ein häufiger Fehler in .SVG-Dateien. Das liegt daran, dass harte Kurven (Kurven, die mit nur zwei Ankern und langen Griffen erstellt wurden) vom Browser nicht gut gerendert werden können.

Das Beste, was Sie tun können, ist, Ihren Pfad in kleinere Segmente zu unterteilen, insbesondere um den Anker herum, der das Problem hat.

Gehen Sie einfach zuObject > Path > Add Anchor Points

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 unterstützen. Ist das totaler Quatsch oder eine Art Balanceakt?

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

Interessant, wie Sie das erreichen. Muss es ein rechter Schmerz sein, Dinge so genau zu positionieren?
@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 es auf die nächste Zahl zu runden.
Ah. Na sicher. Macht Sinn. Tschüss, werde nachforschen.
Wenn Sie ein SVG animieren, beschleunigt dies die Sache, indem Sie sie auf einem Pixel halten. Für Computer ist es schwieriger, Gleitkommazahlen zu verarbeiten. Und schwieriger für Displays zu erraten, ob es 1 Pixel nach links oder rechts sein sollte.

Lösung gefunden.

Dies ist eindeutig nicht die beste, sauberste und schönste Lösung, aber es 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 von iDraw nach SVG

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

Ich hoffe, das hilft anderen Leuten

Ich hatte auch Probleme beim Exportieren und habe versucht:

File>Save as

Anstatt von:

File> Export> Export as.

Und das schien den Trick zu tun!

Wie ich festgestellt habe, tritt dieses Problem nur auf, wenn Sie "nur ausgewählte" exportieren. Wenn der Exporteur keine Ränder (Seite) sieht, macht er mit Kurven etwas falsch.

Der SVG-Export aus Illustrator CC verzerrt Pfade
AntwortenHierDatenschutz-Bestimmungen1y, 4v