Wie eine nachgezeichnete Datei innen aussieht

Der Nachzeichner gruppiert das Ergebnis nach Objekten: Zuerst kommt ein <g> für den Hintergrund (sofern das Bild einen hat), dann ein <g> pro einzelnem Objekt, jeweils mit einem Namen in einem <title> (Background, Object 1, Object 2 …). In jeder Gruppe ist jede Form ein eigenes <path>-Element mit einem fill und einem d-Attribut, das den Umriss als Befehle für Bewegen, Linie und kubische Kurve enthält. Die Formen sind danach verschachtelt, was sie umschließt: Eine Form, die andere enthält (ein Gesicht mit seinen Augen), wird zu einer eigenen Gruppe (Part 1.1, Part 1.1.1 …), deren erster Pfad die Form selbst ist – vollständig unter dem gezeichnet, was sie enthält. Blendest du ein Auge aus, siehst du also das Gesicht und kein Loch. Flecken, die kleiner als ein paar Pixel sind, bleiben unbenannte Pfade in ihrem übergeordneten Objekt. Es gibt keine Konturen und keine Textelemente: Der Schriftzug eines Logos ist ein gefüllter Umriss, kein Text. Steht Ebenen in den Einstellungen auf Nach Farbe, hat die Datei keine Gruppen, sondern stattdessen einen <path> pro Farbe.

Ein kleines rundes Landschafts-SVG und daneben jeder seiner vier Pfade einzeln: eine blaue Scheibe, ein cremefarbener Himmel, ein dunkelblauer Berg und eine orange Sonne mit ihrer Spiegelung

Das Beispiel-SVG auf unserer Startseite (links), dann jeder seiner vier Pfade für sich: jede Form ein eigenes Element mit eigener Füllung, bereit zum Auswählen, Umfärben oder Löschen.

Der Editor liest genau diese Struktur, in der Größe und den Koordinaten der Datei. Jeder Pfad ist eine Form, die du anklicken und auswählen kannst. Die Ebenenliste zeigt die obersten Gruppen der Datei: Eine Datei, deren Formen direkt im SVG liegen (eine Nachzeichnung „Nach Farbe“), öffnet sich als eine einzige Ebene, und eine nach Objekten gruppierte Datei öffnet sich mit einer Ebene pro Gruppe, benannt nach ihr.

Was der Browser-Editor gut kann

  • Eine Form umfärben. Wähle sie aus und such dir eine neue Füllung aus. Weil ein Pfad alle Bereiche dieser Farbe innerhalb eines Objekts enthält, ändert das Umfärben „des Blaus“ alle blauen Bereiche dieses Objekts auf einmal. Sollen zwei davon unterschiedlich werden, ist das eine Trennung für ein Desktop-Programm.
  • Verschieben und skalieren. Zum Verschieben ziehen, mit den Griffen die Größe ändern. Ein Vektor wird beim Skalieren nie unscharf, also mach aus derselben Datei eine Version für den Seitenkopf und eine für ein Favicon.
  • Einzelne Punkte verschieben. Wähle eine Form aus und wechsle zu den Punkten (N): Jeder Ankerpunkt der nachgezeichneten Kurve bekommt einen Griff, den du ziehen kannst, und seine Kurvengriffe biegen die benachbarten Abschnitte. So korrigierst du ein Wackeln oder begradigst eine Kante, ohne den Browser zu verlassen.
  • Formen ausrichten und verteilen. Wähle mehrere Formen aus und richte ihre Kanten oder Mitten aneinander aus oder an der Grafik (eine einzelne Form wird immer an der Grafik ausgerichtet). Sind drei oder mehr ausgewählt, verteilt Verteilen sie mit gleichen Abständen.
  • Vereinigen, subtrahieren, schneiden. Wähle zwei oder mehr Formen aus und nutze Formen kombinieren: Vereinigen verschmilzt sie zu einem Umriss, Subtrahieren schneidet die oberen Formen aus der untersten heraus, Schnittmenge behält nur die Überlappung, Ausschließen behält, was sich nicht überlappt, und Teilen macht aus jeder Überlappung eine eigene Form. Kurven bleiben Kurven, das Ergebnis übernimmt Farbe und Ebene der untersten Form, und ein einziges Rückgängig holt die ursprünglichen Formen zurück. Das ist der übliche Schritt vor dem Schneiden: überlappende Buchstaben zu einem Stück vereinigen oder eine Form abziehen, um eine Aussparung zu machen.
  • Am Raster ausrichten. Schalte den Magneten ein und wähl eine Rastergröße: Was du verschiebst, zeichnest, skalierst oder Punkt für Punkt umformst, landet dann auf dem Raster, das über der Grafik angezeigt wird, solange es eingeschaltet ist. Der Editor merkt sich die Einstellung in deinem Browser.
  • Formen wiederverwenden und an mehreren Dateien arbeiten. Bewahre eine Auswahl in Meine Teile auf (in deinem Browser für dein Konto gespeichert, als Datei exportierbar) und füge sie jeder anderen Zeichnung hinzu. Öffne eine weitere deiner freigeschalteten Dateien in einem neuen Tab, um zwischen ihnen zu kopieren: Jeder Tab hat seinen eigenen Verlauf zum Rückgängigmachen und speichert als neue Version seiner eigenen Datei.
  • Neu anordnen, ausblenden und sperren. Ebenen lassen sich ausblenden, sperren (dann gehen Klicks an die Formen darunter), umbenennen und nach oben oder unten verschieben. Innerhalb einer Ebene dupliziert Strg+D eine Form, und die Pfeiltasten verschieben sie schrittweise.
  • Reste löschen. Fleckenpfade und ein übrig gebliebenes Hintergrundrechteck sind mit einem Klick entfernt. Das ist meist die erste Bearbeitung nach dem Nachzeichnen eines JPEG.
  • Exportieren. Speichere das SVG oder exportiere ein PNG in einer gewählten Pixelbreite, mit erhaltener Transparenz. Das Bearbeiten eines freigeschalteten Ergebnisses verbraucht keine weiteren Credits.

Der Editor öffnet nur Vektoren, die dir gehören: dein eigenes hochgeladenes SVG oder ein Ergebnis, das du freigeschaltet hast. Vorschauen sind Rasterbilder mit Wasserzeichen und lassen sich nicht bearbeiten – so bleibt der kostenpflichtige Vektor aus dem Netz, bis er bezahlt ist.

Was in ein Desktop-Vektorprogramm gehört

Manche Änderungen brauchen Pfad-Chirurgie, die der Browser-Editor nicht bietet:

  • Eine Farbe in getrennte Objekte aufteilen (die zwei blauen Formen, die sich unabhängig bewegen sollen): „Zerlegen“ in einem Desktop-Programm.
  • Einen Umriss versetzen (um einen festen Abstand vergrößern oder verkleinern, etwa eine Kontur für einen Sticker-Schnitt).
  • Füllungen in Mittellinien-Konturen umwandeln für Stiftplotter oder einlinige Gravur.
  • Text in Pfade umwandeln. Der Browser-Editor fügt bearbeitbaren Text hinzu und behält ihn, wandelt ihn aber nicht in Pfade um.

Inkscape (kostenlos, Open Source) kann all das, ebenso die kommerziellen Programme. Öffne das SVG, nutze je nach Bedarf „Zerlegen“, „Erweitern“ (Outset) oder das Knotenwerkzeug und speichere. Weil die Datei normales SVG mit Standard-Pfaddaten ist, hängt nichts daran an png2svg.art.

Eine sinnvolle Reihenfolge

  1. Freischalten und im Editor öffnen. Verirrte Formen löschen, offensichtliche Farben korrigieren, eine wackelige Kante Punkt für Punkt glätten, die Stapelreihenfolge prüfen.
  2. Formen mit Formen kombinieren vereinigen oder ausschneiden und ausrichten, was in einer Linie stehen soll.
  3. Das SVG speichern. Kommt es auf die Größe an, schick es durch den Optimierer (Metadaten entfernen und Koordinaten runden; prüf die angezeigte Größe vorher und nachher).
  4. In einem Desktop-Programm versetzen oder zerlegen, wenn der Auftrag es braucht.
  5. Das freigeschaltete Ergebnis in deinen Dateien behalten: Erneutes Herunterladen ist kostenlos, solange es gespeichert ist, und du kannst es innerhalb der Aufbewahrungsfrist jederzeit wieder im Editor öffnen.

Grenzen, die du kennen solltest

  • Der Editor kann keinen Verlauf hinzufügen; Füllungen sind Volltonfarben oder keine. Konturen (Farbe und Stärke) lassen sich hinzufügen, und Verläufe, Konturen und bearbeitbarer Text, die schon in einer Datei stehen, bleiben erhalten. Alles, was der Editor nicht behalten kann, wird vor dem Speichern aufgelistet.
  • Sehr große Nachzeichnungen (Tausende Pfade aus einer detaillierten Illustration) lassen sich in jedem Browser nur langsam bearbeiten. Vereinfache die Nachzeichnung vor dem Bearbeiten mit einer niedrigeren Farbanzahl.
  • Exportierte PNGs sind Rasterbilder in der gewählten Größe – exportiere in der größten Größe, die du brauchst, oder bleib beim SVG.