SVG Paint Order: Dicke Konturen hinter der Schrift

Setze paint-order="stroke fill" auf ein SVG-Text- oder Formelement, um seinen Umriss vor der Füllung zu zeichnen. Bei einer deckenden Füllung verdeckt die Füllung den nach innen gerichteten Teil der Kontur. So frisst sich ein dicker Umriss nicht in die farbige Vorderfläche der Schrift hinein. Du kannst auch paint-order: stroke fill; in CSS schreiben.

Pfad, Schriftgröße und Konturbreite bleiben gleich. Dies ist eine Darstellungseinstellung, die nützlich ist, wenn eine umrandete Wortmarke nach dem Erhöhen der Konturbreite zu kräftig wirkt oder schlecht lesbar wird. Sie erzeugt keine nach außen ausgerichtete Kontur und keinen neuen Schnittumriss.

Warum der Standardumriss die Buchstaben bedrängt

SVG zeichnet normalerweise zuerst die Füllung eines Elements, dann seine Kontur und dann seine Markierungen. Eine mittige Kontur reicht über die Grenze der gefüllten Form hinweg. Wenn diese Kontur zuletzt gezeichnet wird, verdeckt sie einen Teil der Füllung. An schmalen Buchstabenstämmen kann eine breite Kontur den Großteil der Füllfarbe verdecken.

Das Umkehren der ersten zwei Operationen lässt die Füllung diese Überlappung verdecken. Die SVG-Zeichenspezifikation definiert die Reihenfolge, und MDNs SVG-Attributreferenz dokumentiert sowohl das Attribut als auch sein CSS-Gegenstück. Der kürzere Wert stroke hat dieselbe Reihenfolge wie stroke fill markers: Ausgelassene Operationen folgen anschließend in ihrer normalen relativen Reihenfolge.

Der Effekt benötigt eine sichtbare Füllung. Ein Pfad mit fill="none" hat nichts, was die innere Kontur übermalen könnte. Eine teilweise transparente Füllung kann die Kontur durchscheinen lassen. Verwende deshalb eine deckende Füllung für das hier demonstrierte Ergebnis.

Vergleiche dieselbe Grafik in zwei Größen

Wir haben eine kurze BOLD-Wortmarke mit editierbarem Text und einem kleinen dreieckigen Pfademblem erstellt. Der folgende Browservergleich verändert innerhalb jedes Paars nur die Zeichenreihenfolge. Er verwendet Konturbreiten von 4 und 8 SVG-Benutzereinheiten und zeigt dann dieselbe viewBox von 400 × 110 mit Breiten von 400 und 200 CSS-Pixeln an.

Bei 8 Einheiten verliert die Wortmarke mit normaler Reihenfolge viel von ihrer gelben Vorderfläche. Wenn die Füllung zuletzt gezeichnet wird, bleiben die gelben Stämme sichtbar. Der Effekt ist auch in der 200-Pixel-Version erkennbar, aber kleine Öffnungen bleiben eng. Die winzige innere Öffnung des Emblems wird mit der kräftigeren Kontur ebenfalls schwer unterscheidbar.

Dieses letzte Detail ist wichtig: Die Zeichenreihenfolge kann die Vorderfläche eines Buchstabens erhalten, ohne jedes Loch oder jeden Zwischenraum lesbar zu machen. Konturen reichen weiterhin in ungefüllte Bereiche. Wenn sich eine Öffnung bei der vorgesehenen Anzeigegröße schließt, reduziere die Kontur oder vereinfache die Grafik. Eine vergrößerte Browservorschau ersetzt nicht die Prüfung der Größe, die Leser tatsächlich sehen.

Das sind eigene Zeichnungsbeispiele, keine PerfectVector-Konvertierungsergebnisse. Die Wortmarke verwendet die installierte Arial-Schrift mit einem sans-serif-Ersatz; eine andere Schrift verändert Buchstabenformen und Abstände.

Probiere ein vollständiges SVG aus

Speichere dies als wordmark.svg und öffne es direkt im Browser. Das Beispiel lässt genügend Platz um die Formen für die sichtbare Kontur. Ändere paint-order zum Vergleich auf normal und probiere dann stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Die Gruppe reicht ihre Darstellungseigenschaften an Pfad und Text weiter. Jedes untergeordnete Element verwendet die angeforderte Reihenfolge für seine eigene Darstellung. fill-rule="evenodd" erzeugt die innere Öffnung des Emblems; das ist unabhängig von der Zeichenreihenfolge.

Ändere zur Reproduktion der kleinen Beispiele width und height auf 200 und 55 und lasse die viewBox unverändert. Weil diese Datei keine nicht skalierende Kontur enthält, skalieren Grafik und Kontur gemeinsam. Eine Kontur von 8 Einheiten wird bei dieser Abbildung auf halbe Größe 4 CSS-Pixel breit, bevor der von der Füllung verdeckte Teil berücksichtigt wird.

Weise für eine stylesheetbasierte Version dem Ziel eine Klasse zu und setze:

.outlined-wordmark {
  paint-order: stroke fill;
}

Wenn sowohl ein Präsentationsattribut als auch eine CSS-Deklaration die Eigenschaft festlegen, hat CSS Vorrang. Wenn das Ändern des Attributs scheinbar nichts bewirkt, prüfe die angewendeten Regeln. MDNs CSS-Referenz erklärt außerdem Vererbung und erlaubte Schlüsselwortkombinationen.

Was diese Einstellung nicht verändert

Konturausrichtung. Die Kontur folgt weiterhin demselben mittigen Pfad. Das Übermalen eines Teils durch die Füllung erzeugt einen nach außen wirkenden Rand um gefüllte Bereiche, verschiebt aber die Konturgeometrie nicht nach außen. Am Rand eines Lochs kann die verbleibende sichtbare Kontur in das Loch hineinragen.

Die Stapelung separater Objekte. Das Setzen der Zeichenreihenfolge auf einem Element schiebt dieses Element nicht hinter eine benachbarte Form. Ein späteres überlappendes Objekt kann es weiterhin verdecken. Ordne die Objekte um, wenn das das Problem ist. Ein Beispiel findest du in warum SVG z-index Logopfade nicht umordnet.

Schnittpfade oder Versätze. Ein Schneidegerät oder Geometriewerkzeug benötigt passende Konturen. Du kannst nicht davon ausgehen, dass es einen ansprechenden Browserumriss als einen verbundenen Rand interpretiert. Erzeuge und prüfe die benötigte Geometrie separat, wenn die Ausgabeaufgabe es verlangt.

Schriftportabilität. Das Beispiel enthält editierbaren Text. Das Ändern seiner Zeichenreihenfolge bettet die Schrift nicht ein und fixiert nicht die Glyphenformen. Nutze die Prüfungen zu SVG-Schriftänderungen, wenn eine Wortmarke beim Öffnen anderswo verändert erscheint.

Halte diese Unterschiede beim Bearbeiten auseinander. Eine Änderung der Zeichenreihenfolge lässt sich leicht rückgängig machen; das Umwandeln von Konturen oder Text in Pfade verändert die bearbeitbare Dokumentstruktur.

Prüfe die Ausgabekopie in ihrem Ziel

Beginne mit dem Browserergebnis und öffne dann die gespeicherte Datei in der Anwendung oder im Renderer, die sie verwenden werden. Eine Browservorschau allein belegt nicht, dass ein Editor, PDF-Konverter oder Produktionsprozess die Darstellung erhält.

1. Vergleiche Füllfarbe und äußeren Rand in der endgültigen Größe. Schau in B, O und schmale Emblemöffnungen.
2. Bestätige, dass die erwartete Schrift geladen wurde. Prüfe Abstände und Buchstabenformen.
3. Prüfe die Seitenränder. Eine breitere Kontur benötigt möglicherweise mehr Platz im Viewport oder in der Beschneidung.
4. Öffne die exportierte Ausgabedatei erneut. Ein Export kann Stile oder Objektaufbau verändern, selbst wenn das Arbeitsdokument korrekt aussah.

Wenn das Ziel den Umriss verändert, reduziere die Datei auf eine gefüllte Form mit Kontur und vergleiche sie mit dem Browser. Folge der Diagnose verschwindender SVG-Konturen, wenn es um Beschneidung, Skalierung oder fehlende Farbe geht. Bei einem Farbregelkonflikt behandelt der SVG-Umfärbeleitfaden, wo Füllungen und Konturen definiert sein können.

Wenn sich die Darstellung bei der Übergabe nicht erhalten lässt, behalte das bearbeitbare Original und bereite eine separate Ausgabekopie vor, in der die nötige Darstellung als Formen abgebildet ist. Prüfe diese Kopie visuell und geometrisch; das bloße Umwandeln einer mittigen Kontur reproduziert nicht von selbst jede gewünschte Überlappung und erzeugt keine einzelne Außenkontur.

Wenn die Quelle ein Rasterlogo ist

Verwende das ursprüngliche Vektoremblem und die editierbare Schrift, wenn du sie hast. Es bringt keinen Vorteil, einen Screenshot funktionierenden Texts zu erstellen und nachzuzeichnen, nur um einen Umriss hinzuzufügen.

Wenn ein PNG oder JPG die einzige verbliebene Version des Emblems ist, kann PerfectVectors Workflow zur Logo-Vektorisierung vorgelagert einen SVG-Kandidaten vorbereiten. Prüfe die konvertierte Silhouette und kleine Öffnungen, bevor du diesen Stil anwendest. Die Konvertierung setzt weder die Zeichenreihenfolge noch identifiziert sie deine Originalschrift oder entscheidet, welche Formen einen gemeinsamen Umriss erhalten sollen.

Wenn die Schrift mit der richtigen Schriftart wiederhergestellt werden kann, behalte sie während des Designs als separates Textobjekt. Der umfassendere Leitfaden zur Logo-Vektorisierung erklärt die Wahl zwischen Rasterrekonstruktion und vorhandenem Vektororiginal.

FAQ

Was ist die standardmäßige SVG-Zeichenreihenfolge? Standardmäßig folgen Füllung, Kontur und Markierungen. Der Wert normal fordert diese Reihenfolge an.

Unterscheidet sich paint-order="stroke" von "stroke fill"? Hier erzeugen sie dieselbe Reihenfolge: Kontur, Füllung, dann Markierungen. Nicht aufgeführte Operationen folgen den aufgeführten in ihrer normalen relativen Reihenfolge.

Erzeugt paint-order eine äußere Kontur? Es verschiebt oder versetzt die Kontur nicht. Eine deckende Füllung verdeckt den nach innen gerichteten Teil einer mittigen Kontur. Die verbleibende Kontur kann Löcher und Zwischenräume weiterhin bedrängen.

Warum sieht mein SVG-Umriss weiterhin zu kräftig aus? Die Kontur kann für die Anzeigegröße zu breit sein, die Füllung kann transparent sein oder eine andere CSS-Regel kann die Zeichenreihenfolge überschreiben. Prüfe diese Bedingungen und kleine Öffnungen in der endgültigen Größe.

Quellen

1. W3C — SVG 2 Painting — Definiert die Zeichenreihenfolge und die Beziehung zwischen Füllungen und Konturen.
2. MDN — SVG-Attribut paint-order — Dokumentiert Schlüsselwortreihenfolge, unterstützte Elementtypen und CSS-Vorrang vor dem Präsentationsattribut.
3. MDN — CSS-Eigenschaft paint-order — Erklärt Vererbung und verkürzte Schlüsselwortfolgen.

Hast du nur ein Rasteremblem? Bereite ein bearbeitbares Logo-SVG vor, prüfe seine Öffnungen und teste den Umriss in der vorgesehenen Größe, bevor du die Ausgabekopie erstellst.