Exportieren aus Sketch für Symbolschrift

Ich versuche, SVG-Symbole aus Sketch zu exportieren, um sie in Fontello zu importieren. Die SVGs scheinen jedoch für die App nicht korrekt zu sein (sie funktionieren auch nicht in IcoMoon).

Das Symbol, das ich als Test erstellen möchte, ist ein einfaches Symbol im Hamburger-Stil, das nur wenige Zeilen umfasst, aber nicht richtig funktioniert. Es ist gelinde gesagt frustrierend.

Hat jemand Erfahrung damit und könnte sich von seinem Wissen trennen? Danke.

Ich habe herausgefunden, wie man SVG aus einer Skizze exportiert, um icomoon korrekt zu importieren:

Schritt 1

Verhindern Sie, dass SVG außerhalb von Rahmen erstellt wird, indem Sie die Pfadgruppe auswählen und auf Folgendes klicken: Ebene> Pfade> Strich vektorisieren

Um zu wissen, dass dies funktioniert hat, wurden die Striche in geschlossene Pfade umgewandelt, und der Inspektor zeigt jetzt die Füllfarbe anstelle der Rahmenfarbe an.

Schritt 2

Exportieren Sie jedes Symbol / SVG, indem Sie im Inspektor auf die Registerkarte Exportierbar machen klicken und das SVG-Format auswählen.

Schritt 3

Importieren Sie die SVG-Symbole wie gewohnt in icomoon. Jetzt sollte das Set die Symbole korrekt anzeigen und die Rastergröße sollte genau sein. HINWEIS: Stellen Sie sicher, dass alle SVGs auf der Skizze dieselbe Höhe haben.

UPDATE 2016 Vielen Dank an @jackocnr für den Hinweis:

Im Jahr 2016 lautet die Menüoption Skizze Ebene> In Konturen konvertieren

Dieses Handbuch hat bei mir funktioniert. es ist sehr informativ. Der Autor spricht über Probleme beim Exportieren von Skizzen. Ich zitiere aus seinem Artikel, falls der Artikel entfernt wird.

Gesamtlösung

1. Erstellen Sie für jedes Symbol eine Zeichenfläche (Einfügen -> Zeichenfläche).
2. Stellen Sie sicher, dass die Position jeder Zeichenfläche keine halben Pixel hat und eine gerade Zahl ist.
3. Entfernen Sie alle Symbolrotationen.
4. Entfernen Sie alle Begrenzungsrahmen, damit Sketch nicht benötigten Code exportiert.
5. Verhindern Sie, dass SVG aus der Rahmenebene> Pfade> Strichvektor erstellt wird (danke Gus )
6. export Clean .svg

* Dies ist das Symbol, das der Autor zu exportieren versucht hat

Skizzieren Sie das Exportieren von Fehlern

Fehler Nr. 1

Der Export der Skizzentransformation wurde korrigiert, indem die Zeichenflächenposition auf eine gerade Zahl geändert wurde. Dadurch wird jede Transformation im Code entfernt. Da die Position um halbe Pixel verschoben war, änderte Sketch die Größe meiner Ansichtsbox auf 0 0 25 25. Meine ursprüngliche Zeichenfläche war 24 x 24 Pixel groß. Dieser Fehler fügte dem Code sogar Spezifikationen hinzu. Kein Bueno.

Fehler # 2

Problem: Jedes Symbol wurde standardmäßig auf Breite: 24 Pixel, Höhe: 24 Pixel und Randradius: 3 Pixel eingestellt. Das Problem ist, dass beim Exportieren das Rechteck dem Pfad hinzugefügt wurde, was es schwierig macht, bei jeder Größe per CSS zu skalieren.

Lösung: Löschen Sie alle transparenten Begrenzungsrahmen und lassen Sie CSS die Magie ausführen. Alles, was die Entwickler wirklich brauchten, war die Viewbox, die auf 24 x 24 Pixel eingestellt war. Sie können die Breite, Höhe und den Randradius hinzufügen.

Fehler # 3

Problem: Skizze exportiert eine Drehung (-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

Lösung: Öffnen Sie Ihr .svg-Symbol in Adobe Illustrator, drehen Sie das Symbol und ziehen Sie es per Drag & Drop zurück in Sketch. Dies entfernt die Rotation insgesamt.

Fehler Nr. 4 Problem: Verwenden des Slice-Tools Exportieren übersetzen und erneut transformieren. Lösung: Nichts. Tu es einfach nicht. Das Schneiden dauert sowieso zu lange und ist Zeitverschwendung.

Wenn Sie Unterpfade verwenden, reduzieren Sie die Form vor dem Export. Ich habe in Fontello immer noch einen Fehler beim manuellen Erstellen zusammengesetzter Pfade erhalten, aber es scheint korrekt funktioniert zu haben.

(Meine Form war ein Kreis mit zwei ausgeschnittenen Formen.)