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.
fonts
icon
sketch-app
Alex McCabe
quelle
quelle
Antworten:
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:
quelle
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
* 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).
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.
quelle
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.)
quelle