SVG hat also dieses Präsentationsattribut stroke-miterlimit. Wahrscheinlich haben Sie es gesehen, wenn Sie ein SVG aus einem Grafikeditor exportiert haben, oder vielleicht haben Sie festgestellt, dass Sie es entfernen konnten, ohne dass sich das visuelle Erscheinungsbild verändert hat.
Nach einiger Recherche entdeckte ich als Erstes, dass das Attribut mit stroke-linejoin zusammenarbeitet, und ich werde Ihnen zeigen, wie das funktioniert, sowie eine ganze Reihe weiterer Dinge, die ich über dieses interessante (und vielleicht übersehene) SVG-Attribut gelernt habe.
TLDR;
stroke-miterlimit hängt von stroke-linejoin ab: Wenn wir round oder bevel für Ecken verwenden, dann ist es nicht notwendig, stroke-miterlimit zu deklarieren. Wenn wir aber stattdessen miter verwenden, können wir es immer noch weglassen und vielleicht ist der Standardwert ausreichend. Seien Sie gewarnt, dass viele Grafikbearbeitungsprogramme dieses Attribut hinzufügen, auch wenn es nicht notwendig ist.
Was ist stroke-linejoin?
Ich weiß, wir sind eigentlich hier, um über stroke-miterlimit zu sprechen, aber ich möchte mit stroke-linejoin beginnen, wegen der engen Zusammenarbeit. Dies ist die Definition von stroke-linejoin, direkt aus der SVG Working Group (SVGWG) entnommen:
stroke-linejoingibt die Form an, die an den Ecken von Pfaden oder einfachen Formen verwendet werden soll, wenn diese mit einem Strich versehen werden.
Das bedeutet, **wir können definieren, wie die Ecke aussieht, wenn zwei Linien an einem Punkt aufeinandertreffen**. Und dieses Attribut akzeptiert fünf mögliche Werte, obwohl zwei davon keine Browserimplementierung haben und vom Standard als vom Auslaufen bedroht eingestuft werden. Daher werde ich kurz die drei unterstützten Werte vorstellen, die das Attribut akzeptiert.
miter ist der Standardwert und zufällig auch der wichtigste der drei Werte, die wir uns ansehen. Wenn wir stroke-linejoin nicht explizit im SVG-Code deklarieren, dann wird miter verwendet, um die Ecke eines Pfades zu formen. Wir wissen, dass ein Join auf miter gesetzt ist, wenn beide Kanten in einem scharfen Winkel aufeinandertreffen.
Aber wir können auch round wählen, das die Kanten mit – Sie haben es erraten – abgerundeten Ecken abrundet.
Der Wert bevel hingegen erzeugt eine flache Kante, die irgendwie wie eine abgeschnittene Ecke aussieht.
Was ist stroke-miterlimit?
OK, nachdem wir nun wissen, was stroke-linejoin ist, kommen wir zum eigentlichen Thema und zerlegen die Definition von stroke-miterlimit aus dem Buch Using SVG with CSS3 and HTML5:
[…] bei sehr engen Ecken muss man den Strich über eine ziemlich weite Strecke verlängern, bevor die beiden Kanten aufeinandertreffen. Aus diesem Grund gibt es eine sekundäre Eigenschaft:
stroke-miterlimit. Sie definiert, wie weit man die Spitze beim Erstellen einer Gehrungsecke verlängern kann.
Anders ausgedrückt, stroke-miterlimit legt fest, wie weit der Strich der Kanten reicht, bevor sie sich an einem Punkt treffen können. Und das nur, wenn stroke-linejoin auf miter gesetzt ist.
Der Wert von stroke-miterlimit kann also jede positive Ganzzahl sein, wobei 4 der Standardwert ist. Je höher der Wert, desto weiter darf die Eckform gehen.
Wie sie zusammenarbeiten
Sie haben jetzt wahrscheinlich ein gutes konzeptionelles Verständnis dafür, wie stroke-linejoin und stroke-miterlimit zusammenarbeiten. Aber je nach Wert von stroke-miterlimit erhalten Sie möglicherweise einige scheinbar eigenartige Ergebnisse.
Ein Beispiel: Wenn stroke-linejoin auf miter gesetzt ist, kann es tatsächlich wie der Wert bevel aussehen, wenn das Miter-Limit zu niedrig ist. Hier ist noch einmal der Standard, um uns zu helfen zu verstehen, warum:
Wenn die Gehrungslänge geteilt durch die Strichbreite den
stroke-miterlimitüberschreitet, wird [der Wertmiter] in eine Abschrägung umgewandelt.
Mathematisch könnten wir also sagen, dass dies
[miter length] / [stroke width] > [stroke-miterlimit] = miter
[miter length] / [stroke width] < [stroke-miterlimit] = bevelDas ergibt Sinn, oder? Wenn die Gehrung die Breite des Strichs nicht überschreiten kann, dann sollte es eine flache Kante sein. Andernfalls kann die Gehrung wachsen und eine Spitze bilden.
Manchmal ist Sehen Glauben, hier ist Ana Tudor mit einer wunderbaren Demo, die zeigt, wie der Wert von stroke-miterlimit das stroke-linejoin eines SVG beeinflusst.
Miter-Limits in Design-Apps festlegen
Wussten Sie, dass Gehrungsverbindungen und -limits in vielen der Design-Apps, die wir in unserer täglichen Arbeit verwenden, verfügbar sind? Hier finden Sie sie in Illustrator, Figma und Inkscape.
Miter-Limits in Adobe Illustrator festlegen
Illustrator bietet eine Möglichkeit, den Gehrungswert bei der Konfiguration des Strichs eines Pfades zu ändern. Sie finden ihn in den "Strich"-Einstellungen eines Pfades. Beachten Sie, wie – getreu dem Standard – wir nur dann einen Wert für das "Limit" festlegen können, wenn die "Ecke" des Pfades auf "Miter Join" gesetzt ist.
Eine Nuance ist, dass Illustrator ein Standard-Miter-Limit von 10 anstelle des Standardwerts von 4 hat. Das habe ich jedes Mal bemerkt, wenn ich die SVG-Datei exportiere oder den resultierenden SVG-Code kopiere und einfüge. Das kann verwirrend sein, wenn man den Code öffnet, denn **auch wenn man den Miter-Limit-Wert nicht ändert, fügt Illustrator stroke-miterlimit="10" hinzu, wo man 4 oder vielleicht gar kein stroke-miterlimit erwarten würde.**
Und das gilt auch, wenn wir einen anderen stroke-linejoin-Wert als "Miter Join" wählen. Hier ist der Code, den ich beim Exportieren eines SVG mit stroke-linejoin="round" erhalten habe.
<svg viewBox="0 0 16 10"><path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M0 1h15.8S4.8 5.5 2 9.5" fill="none" stroke="#000"/></svg>Das stroke-miterlimit sollte nicht da sein, da es nur mit stroke-linejoin="miter" funktioniert. Hier sind ein paar Workarounds dafür:
- Setzen Sie den Wert "Limit" auf 4, da dies der Standardwert in SVG ist und der einzige Wert, der nicht im Code erscheint.
- Verwenden Sie die Optionen "Exportieren als" oder "Für Bildschirme exportieren" anstelle von "Speichern unter" oder dem direkten Kopieren und Einfügen der Vektoren.
Wenn Sie das behoben sehen möchten, schließen Sie sich mir an und stimmen Sie für die Anfrage, um dies zu ermöglichen.
Miter-Limits in Figma festlegen
Gehrungsverbindungen und -limits sind in Figma etwas anders. Wenn wir auf den Knoten eines Winkels in einer Form klicken, finden wir unter den drei Punkten des Abschnitts "Strich" eine Stelle, an der wir die Verbindung einer Ecke festlegen können. Die Option "Miterwinkel" erscheint standardmäßig, aber nur, wenn die Verbindung auf "Miter" gesetzt ist.
Dieser Teil funktioniert ähnlich wie in Illustrator, mit Ausnahme der Art und Weise, wie Figma es uns ermöglicht, den Miterwinkel in Grad statt in Dezimalwerten festzulegen. Es gibt noch einige andere spezifische Nuancen zu beachten:
- Der Winkel beträgt standardmäßig 7,17° und es gibt keine Möglichkeit, einen niedrigeren Wert einzustellen. Beim Exportieren des SVG wird dieser Wert im Markup zu
stroke-miterlimit='16‘, was sich sowohl vom SVG-Standard als auch vom Illustrator-Standard unterscheidet. - Der Maximalwert ist 180°, und beim Zeichnen mit dieser Option wird die Verbindung automatisch auf "bevel" (abgeschrägt) umgeschaltet.
- Beim Exportieren mit abgeschrägter Verbindung ist das
stroke-miterlimitim Code vorhanden, behält aber den Wert, der zuletzt aktiv war, als der Miterwinkel eingestellt wurde (Illustrator macht dasselbe). - Beim Exportieren des SVG mit einer runden Verbindung wird der Pfad erweitert und wir haben keinen Strich mehr, sondern einen Pfad mit Füllfarbe.
Ich konnte keine Möglichkeit finden, den zusätzlichen Code zu vermeiden, der im exportierten SVG landet, wenn stroke-miterlimit unnötig ist.
Miter-Limits in Inkscape festlegen
Inkscape funktioniert genau so, wie ich es von einer Design-App erwarten würde, die Gehrungsverbindungen und -limits verwaltet. Wenn eine Gehrungsverbindung ausgewählt wird, ist der Standardwert 4, genau wie im Standard. Besser noch, stroke-miterlimit wird aus dem exportierten SVG-Code ausgeschlossen, wenn es der Standardwert ist!
Wenn wir jedoch einen beliebigen Pfad mit abgeschrägter oder runder Verbindung exportieren, nachdem das Limit geändert wurde, ist das stroke-miterlimit wieder im Code vorhanden, es sei denn, wir behalten die 4 Einheiten des Standards im Feld "Limit". Derselbe Trick wie bei Illustrator.
Diese Beispiele funktionieren gut, wenn wir die Option **Speichern unter → Optimiertes SVG** wählen. Inkscape ist kostenlos und Open Source und hat am Ende des Tages den saubersten Code, was stroke-miterlimit und die vielen Optionen zur Code-Optimierung für den Export betrifft.
Aber wenn Sie mit Illustrator vertrauter sind (wie ich), gibt es einen Workaround zu beachten. Figma fühlt sich aufgrund der Grad-Einheiten und der Erweiterung der Striche am weitesten von den Standards und dem erwarteten Verhalten entfernt an.
Zusammenfassung
Und das habe ich über das SVG-Attribut stroke-miterlimit gelernt. Es ist eines dieser leicht zu übersehenden Dinge, die wir uns vielleicht blindlings abschneiden, besonders wenn wir eine SVG-Datei optimieren. Wenn Sie also das nächste Mal stroke-miterlimit einstellen, wissen Sie, was es tut, wie es mit stroke-linejoin zusammenarbeitet und warum Sie möglicherweise eine abgeschrägte Verbindung erhalten, wenn Sie einen Miter-Limit-Wert festlegen.