Falsche Pfade in der aus SVG generierten Symbolschrift

Ich habe eine Sammlung einfacher SVG-Symbole, die aus Illustrator exportiert wurden. Diese enthalten nur ein <path>Element, um das Symbol selbst anzupassen, und keine Rahmen. Das ursprüngliche SVG-Format scheint korrekt zu sein, aber innerhalb der generierten Schriftart scheint die Symbolgrenze unterbrochen zu sein; mit scharfen Ecken und unregelmäßigen Linien. Um die Schriftart zu generieren, verwende ich dieses Skript: https://github.com/nfroidure/gulp-iconfont .

Weiß jemand woran das liegen könnte? Hängt das mit dem CSS zusammen? Der Illustrator-Export? Oder wie die Schriftart erstellt wurde?

Hier ist das Original-SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><title>users</title><g id="_973-user-toolbar_2x.png" data-name="973-user-toolbar@2x.png"><path d="M32.34,30.59A3.64,3.64,0,0,1,30,28.3c-.41-1.69,1.06-3.54,1.06-3.54h0c.11-.11,2-3.68,2-9.48C33,10.87,31.25,6,25,6s-8,4.87-8,9.29a21,21,0,0,0,1.91,9.42S20.41,26.6,20,28.3a3.63,3.63,0,0,1-2.35,2.29C8.62,33.4,3,34.71,3,37.25V40a2.15,2.15,0,0,0,2,2H45a2.15,2.15,0,0,0,2-2V37.25C47,34.71,41.38,33.4,32.34,30.59ZM45,39.91l-.09.09H5.09L5,39.91V37.34c.68-1,9.82-3.79,9.82-3.79s6.21-1.39,7.13-4.79c.55-2.3-.88-4.48-1.37-5.14A20,20,0,0,1,19,15.29C19,10.45,21,8,25,8s6,2.45,6,7.29a20.05,20.05,0,0,1-1.58,8.27l-.67,1.09a5.89,5.89,0,0,0-.71,4.12c.83,3.47,6,4.45,7.13,4.78,4.29,1.3,9.13,2.78,9.81,3.79Z"/></g></svg>

Hier, wie es aussieht.

ORIGINAL-SVG:

ORIGINAL-SVG

IN EINEM WEBPROJEKT VERWENDETE SCHRIFTART:

SCHRIFTART, DIE IN EINEM WEBPROJEKT VERWENDET WIRD

Dies sieht nach einem Pfadrundungsproblem oder einem "Eckenfehler" aus. Denken Sie auch daran, dass jeder berechnete Wert, der keine gerade ganze Zahl ist, so gerundet wird, dass er „auf ein Pixel“ fällt, und je kleiner Ihre Schriftart ist, desto größer ist der Einfluss einer solchen Rundung. Es wäre interessant, das ursprüngliche SVG als SVG statt als PNG zu sehen. Dies könnte etwas enthüllen, das Illustrator unterstützt, aber kein striktes SVG (usw.) ist.
Ich habe die Frage bearbeitet und den SVG-Code hinzugefügt. Es ist nicht möglich, SVG-Dateien anzuhängen. Wie Sie sehen können, gibt es viele Werte, die keine ganzen Zahlen sind. Wissen Sie, ob es eine Möglichkeit gibt, das SVG für die Verwendung von Schriftarten zu optimieren? sollte ich versuchen, den "Eckentyp" irgendwie anzugeben? Danke

Antworten (1)

Es ist mit ziemlicher Sicherheit ein Problem mit der generierten Schriftart.

Die Gulp-Iconfont README sagt:

Wenn einige Font-Glyphen nicht richtig konvertiert werden, sollten Sie die normalize:trueOption und eine FontHeight größer als 1000 ( fontHeight: 1001) hinzufügen.

In Bezug auf die SVG heißt es auch:

SVG vorbereiten

Achten Sie darauf, dass Ihre SVG-Icons hoch genug sein müssen. 500 ist das Minimum . Wenn Sie die Größe nicht ändern möchten, können Sie versuchen, die fontHeightund die normalizeOption zu kombinieren, um sie in der richtigen Größe zu erhalten.

...

Speichern Sie Ihre Datei als SVG mit den folgenden Einstellungen:

  • SVG-Profile: SVG 1.1
  • Schriftarttyp: SVG
  • Fonts Subsetting: Keine
  • Optionen Bildspeicherort: Einbetten
  • Erweiterte Optionen
    • CSS-Eigenschaften: Präsentationsattribute
    • Nachkommastellen: 1
    • Kodierung: UTF-8
    • Weniger Elemente ausgeben: prüfen

Ihr SVG befindet sich in einer 50 × 50-Viewbox, daher ist dies wahrscheinlich das Problem. Sie sollten versuchen, die Schriftart neu zu generieren, wobei die Größe Ihres SVG auf eine geeignetere Größe geändert wird, und/oder versuchen, mithilfe einer Kombination aus fontHeightund normalizeOptionen zu generieren.

Sie sollten auch versuchen, Ihr SVG auf das erforderliche Minimum zu reduzieren, also alle unnötigen Gruppen oder Elemente entfernen.

Dies ist Ihr SVG, das von Illustrator mit 1000 × 1000 erneut gespeichert wurde:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1000px" height="1000px" viewBox="0 0 1000 1000" xml:space="preserve">
    <path d="M646.8,611.8c-22-7-39.3-24-46.8-45.8c-8.2-33.8,21.2-70.8,21.2-70.8l0,0c2.2-2.2,40-73.6,40-189.6C660,217.4,625,120,500,120s-160,97.4-160,185.8c-2,64.9,11.1,129.4,38.2,188.4c0,0,30,37.8,21.8,71.8c-7.5,21.9-24.9,38.9-47,45.8C172.4,668,60,694.2,60,745v55c1.5,21.5,18.5,38.5,40,40h800c21.5-1.5,38.5-18.5,40-40v-55C940,694.2,827.6,668,646.8,611.8zM900,798.2l-1.8,1.8H101.8l-1.8-1.8v-51.4c13.6-20,196.4-75.8,196.4-75.8s124.2-27.8,142.6-95.8c11-46-17.6-89.6-27.4-102.8C389.3,419.8,378.5,363,380,305.8C380,209,420,160,500,160s120,49,120,145.8c1.3,56.7-9.5,113.1-31.6,165.4L575,493c-14.7,24.8-19.7,54.1-14.2,82.4c16.6,69.4,120,89,142.6,95.6c85.8,26,182.6,55.6,196.2,75.8L900,798.2z"/>
</svg>

Beachten Sie, dass ich nie gulp-iconfont verwendet habe, also gehe ich nur von den Anweisungen in der README aus.

Tut mir leid, ich habe den Teil verpasst, wo es heißt, dass die Höhe mindestens 500 betragen sollte. Beide Lösungen skalieren das SVG oder fontHeight: 1001 und normalisieren: löst das Problem
Falsche Pfade in der aus SVG generierten Symbolschrift
AntwortenHierDatenschutz-Bestimmungen1y, 0v