Wie erstelle ich einen SVG-Pfad aus einem Lineart?

Ich habe eine Strichzeichnung im PNG-Format, aus der ich ein SVG erstellen muss.

Ich muss den SVG-Pfad von rechts nach links, von links nach rechts, von der Mitte zu den Seiten ODER von den Seiten zur Mitte erstellen. Hier ist ein Beispiel:

Bild-Skyline

Ich brauche dies für ein jQuery-Plugin (Lazy Line Painter), das diese Strichzeichnung in der Reihenfolge des in der SVG-Datei angegebenen Pfads animiert.

Ich verwende Adobe Illustrator CS6 und es erstellt einen durcheinandergebrachten SVG-Pfad in der SVG-Datei. Aus diesem Grund beginnt und endet die Animation abrupt aus jeder Richtung (gemäß dem SVG-Pfad in der SVG-Datei).

Ich habe auch die portable Version von Inkscape, obwohl ich nicht weiß, wie ich Inkscape verwenden soll, um das PNG als Linienvektor zu importieren.

Kann bitte jemand eine Möglichkeit vorschlagen, dies in Illustrator, Inkscape oder einem anderen Dienstprogramm zu tun?

Wie kann man die SVG-Ausgabedatei in Illustrator verkleinern? Ich habe zwei PNG-Strichzeichnungen in Illustrator platziert und sie dann nachgezeichnet . Die ausgegebene SVG-Datei ist 470 kb groß, während ich weniger als 40 kb benötige. Gibt es ein Online-Tool oder ein Illustrator/Photoshop-Plugin, um die SVG-Ausgabe auf eine Größe von 40 KB zu optimieren?

Antworten (1)

Ihre Probleme liegen in den unvermeidlichen Mängeln von Vektorisierern wie dem von Ihnen verwendeten Tracer. Unten sehen Sie zum Beispiel eine Nahaufnahme Ihres Originalbildes und, rot überlagert, die beste Nachzeichnung, die ich in einer Minute mit Inkscape finden konnte:

Geben Sie hier die Bildbeschreibung ein

Sie können Folgendes sehen:

  • Die Linie wird nicht als Linie realisiert, sondern als Fläche. Obwohl dies behoben werden kann, könnte es einige Ihrer Probleme erklären.
  • Auf Pixelebene gibt es viele Unvollkommenheiten Ihrer Spur.
  • Es gibt weit mehr Knoten als eigentlich notwendig (was Ihre große Dateigröße erklärt).

Während ein anderes Programm oder andere Einstellungen für den Tracer besser sein können, bleiben die grundlegenden Probleme bestehen, da Computeralgorithmen weitaus schlechter als Menschen darin sind, Formen und ähnliches zu erkennen.

Um also ein zufriedenstellendes Ergebnis zu erzielen, müssen Sie diese Skyline wahrscheinlich selbst neu zeichnen. Da es hauptsächlich aus einfachen geometrischen Formen besteht, sollte dies eine ziemlich einfache Aufgabe sein.

Unten sind die Ergebnisse einer schnellen Neuzeichnung dieser Nahaufnahme, die ich in weniger als einer Minute gemacht habe (mit der Einschränkung, dass ich einige Erfahrung damit habe).

Geben Sie hier die Bildbeschreibung ein

Beachten Sie insbesondere, wie wenige Knoten ich verwendet habe.

Wenn Sie dies versuchen, vergessen Sie nicht, Werkzeuge zu verwenden, um Knoten aneinander auszurichten und Winkel gegebenenfalls rechtwinklig zu machen.

Wenn das Obige nicht ausreicht, um die Größe Ihrer SVG-Datei zu reduzieren, können Sie einige unechte Informationen (z. B. Metadaten und andere Informationen, die für das Rendern des Bildes oder das, was Sie tun möchten, nicht erforderlich sind), die Inkscape in SVG-Dateien speichert, durch Speichern entfernen Ihre Datei als Plain SVG anstelle von Inkscape SVG und durch Vacuuming Defs.

Unabhängig vom Programm können Sie auch per Hand falsche Informationen in der XML-Quelle des SVG identifizieren und dann ein kleines Skript schreiben, um sie zu löschen.

Siehe dazu auch diese Frage zu Super User .

"Sie müssen diese Skyline wahrscheinlich selbst neu zeichnen" - gibt es keine Möglichkeit, dies zu automatisieren? Könnte das etwas nützen? github.com/fablabnbg/inkscape-centerline-trace
@Mawg: Angesichts der strengen Anforderungen und der Anwendung des OP würde ich aus den in der Frage erläuterten Gründen nein sagen. Wenn Sie nachsichtiger sind, welches Ergebnis Sie akzeptieren, sieht die Situation natürlich anders aus.
Wie erstelle ich einen SVG-Pfad aus einem Lineart?
AntwortenHierDatenschutz-Bestimmungen1y, 0v