Exportieren aus Sketch für Symbolschrift

9

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.

Alex McCabe
quelle
Können Sie Ihre SVG-Datei irgendwo ins Internet stellen und darauf verlinken? Was genau ist das Problem mit icomoon? Ich habe festgestellt, dass icomoon seltsame Dinge tun wird, wenn ich meine Formen nicht zu minimalen Pfaden zusammenführe.
Chovy
Was genau ist das Problem bei icomoon?
Chovy
Ich habe es herausgefunden, ich habe Ränder in der SVG verwendet und ich habe nicht bemerkt, dass Icon-Fonts sie ignorierten.
Alex McCabe
Ich habe ein ähnliches (vielleicht das gleiche) Problem. Das Ziehen der exportierten SVG-Datei in Fontello führt zu nichts. Ich kann nicht sagen, ob es sich um einen Fehler mit Fontello handelt oder ob die Datei aus irgendeinem Grund nicht erkannt wird.
Elliottottregan
Ich bin zu Icomoon übergegangen. Es scheint die .svg-Dateien besser zu lesen. Ich finde auch, dass wenn Sie Grenzen verwenden, es das Ganze abwirft.
Alex McCabe

Antworten:

11

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

Gus
quelle
Ich hatte die vektorisierten Strichoptionen völlig vergessen. Danke, Mann!
Alex McCabe
"... Stellen Sie sicher, dass alle SVGs auf der Skizze dieselbe Höhe haben." Wie verwalten Sie beispielsweise das Minuszeichen ("-") dafür?
1
Im Jahr 2016 ist die
Menüoption
1

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

Geben Sie hier die Bildbeschreibung ein

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.

Oder Frenkel
quelle
0

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.)

elliottregan
quelle
Leider können Sie nur in den sich kreuzenden Formen abflachen. Wenn Sie subtrahieren, werden Sie nicht zugelassen.
Alex McCabe
@AlexMcCabe Gibt es Neuigkeiten zum Reduzieren von Pfaden, die sich gegenseitig subtrahieren?
Guido Bouman
Es gab nichts, Kumpel. Das Beste, was Sie tun können, ist, Ihre Formen so weit wie möglich zu vereinfachen oder die Linien von Hand zu verbinden. Welches ist ein Albtraum: /
Alex McCabe