SVG-Konturausrichtung: Umrisse innen oder außen

Eine SVG-Kontur liegt mittig auf ihrem Pfad. Damit ein 12 Einheiten breiter Umriss vollständig innerhalb einer geschlossenen Form liegt, zeichne eine Kontur mit 24 Einheiten Breite und beschneide sie auf diese Form. Um dieselbe sichtbare Breite außerhalb zu platzieren, zeichne die 24 Einheiten breite Kontur durch eine Maske, die das Innere der Form ausblendet. Behalte eine Kopie des ursprünglichen Pfads: Beschneidung und Maske verändern die Sichtbarkeit, nicht die zugrunde liegende Geometrie.

Die vorgeschlagene Eigenschaft stroke-alignment erscheint in einem Redaktionsentwurf zu SVG Strokes, doch der Entwurf erklärt, dass die Konturdefinition von SVG 2 weiterhin normativ ist. Erzeuge und teste bei einer Datei, die in unterschiedlichen Browsern und Editoren funktionieren muss, das sichtbare Ergebnis, statt dich auf die vorgeschlagene Eigenschaft zu verlassen.

Sieh, wo der gezeichnete Umriss liegt

Dieses eigene geschlossene Abzeichen verwendet in allen drei Ansichten einen Pfad. Seine blaugrüne Füllung, die nominal sichtbare Kontur von 12 Einheiten und der umgebende Dokumentraum bleiben gleich. Die korallenfarbene gestrichelte Linie ist der mittige Pfad. In der mittleren Ansicht fällt er mit der äußeren Kante des blauen Bands zusammen; rechts mit der inneren Kante.

Die mittlere Ansicht hält die äußere gezeichnete Grenze des Abzeichens am ursprünglichen Pfad. Die äußere Variante erweitert den gezeichneten Bereich um 12 Einheiten rund um den Pfad. Wenn das Abzeichen fast den Rand der viewBox berührt, kann diese zusätzliche Farbe abgeschnitten werden. MDNs Leitfaden zu Füllungen und Konturen beschreibt gewöhnliche Konturen als mittig auf dem Pfad; der obige Vergleich rendert die drei Konstruktionen in einer Größe.

Erzeuge einen inneren Umriss mit Beschneidung

Platziere den geschlossenen Pfad in <defs>. Verwende ihn einmal als Füllung und einmal als Beschneidungspfad. Zeichne eine zweite Kopie mit der doppelten gewünschten Konturbreite und begrenze diese Kontur dann auf das Innere des Pfads. Eine Beschneidung macht alles außerhalb ihrer Form unsichtbar; sie löscht die ausgeblendete Hälfte der Kontur nicht. Lies die MDN-Referenz zu clipPath und unseren Leitfaden zu clipPath-Koordinaten, wenn sich eine importierte Beschneidung von ihrer Grafik weg verschiebt.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Hier reicht die Kontur von 24 Einheiten normalerweise 12 Einheiten auf jede Seite des Pfads. Die Beschneidung entfernt ihre äußere Hälfte, sodass innen ein sichtbares Band von 12 Einheiten verbleibt. Lege die Füllung wie im Beispiel unter die beschnittene Kontur, wenn das gesamte innere Band sichtbar bleiben soll. Prüfe bei zusammengesetzten Pfaden mit Löchern Füll- und Beschneidungsregeln, bevor du annimmst, welche Seite innen liegt.

Erzeuge einen äußeren Umriss mit einer Maske

Ein äußeres Band benötigt den umgekehrten Sichtbarkeitsbereich. Die folgende Maske ist über dem Dokumentbereich weiß und im Abzeichen schwarz. Sie wird nur auf die Konturkopie angewendet, während eine unmaskierte Kopie die Füllung liefert. Der ausdrücklich definierte Maskenbereich lässt Platz für die Kontur außerhalb der ursprünglichen Form.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Wieder bleibt nur die Hälfte der mittigen Kontur von 24 Einheiten erhalten, sodass das sichtbare äußere Band 12 Einheiten breit ist. Lege den Maskenbereich bewusst fest: MDN dokumentiert, wie maskUnits, maskContentUnits und die Bereichsabmessungen eine Maske beeinflussen. Das weiße Rechteck muss die gesamte Außenkontur abdecken. Eine zu kleine Maske kann genau die Kante abschneiden, die du erhalten wolltest.

Für eine deckende Füllung gibt es einen kürzeren visuellen Trick: Zeichne eine Kontur mit doppelter Breite und lege dann mit paint-order="stroke fill" die Füllung darüber. Das verdeckt die innere Hälfte unter der Füllung, aber die Kontur existiert dort weiterhin und kann wieder erscheinen, wenn die Füllung halbtransparent wird oder entfernt wird. MDN erklärt die Zeichenreihenfolge. Verwende die ausdrückliche Maske, wenn das äußere Band eine eigenständige sichtbare Konstruktion bleiben muss. Für einen aus einer gesamten mehrfarbigen Alpha-Silhouette abgeleiteten Umriss lies SVG-Morphologiekonturen; dieser Filter verändert die Darstellung bei erhaltenen Quellpfaden.

Prüfe das SVG nach dem Import

Beschneidungen und Masken beeinflussen das Rendering, während eine nachgelagerte Anwendung möglicherweise gefüllte Konturen benötigt. Behalte ein bearbeitbares Original und teste eine Ausgabekopie im tatsächlichen Ziel:

1. Öffne das SVG separat und platziere es anschließend im vorgesehenen Editor oder in der Produktions-App. Vergleiche innere und äußere Kanten bei derselben Zoomstufe.
2. Prüfe die viewBox oder Zeichenfläche um die Außenvariante. Lasse Platz für ihr nach außen reichendes Band von 12 Einheiten und Verbindungen an spitzen Ecken.
3. Prüfe die Objektliste. Die Beispiele enthalten wiederverwendbare Pfade, eine Beschneidung oder Maske und eine aktive Kontur. Sie erzeugen keine einzelne massive Umrisskontur.
4. Wenn der Empfänger gefüllte Geometrie benötigt, konvertiere die ausgewählte Kontur auf einer Ausgabekopie und prüfe die entstandenen Formen. Behalte die Quelle mit aktiver Kontur für spätere Breitenänderungen.

Wenn die Linie beim Export verschwindet, nutze die Checkliste zur Kontursichtbarkeit, um fehlende Farbe, Beschneidung und Importunterstützung zu unterscheiden. Wenn eine Kontur unerwartet eine Füllung verdeckt, zeigt unsere Erklärung zu SVG paint-order, welche Ebene zuletzt gezeichnet wird.

Wo PerfectVector hineinpasst

Diese Schritte beginnen mit einem bearbeitbaren SVG-Pfad. Wenn das Logo nur als PNG oder JPG existiert, kann PerfectVectors Workflow zur Logo-Vektorisierung einen SVG-Kandidaten erzeugen, bevor du die Beschneidung oder Maske hinzufügst. Vergleiche Silhouette, Ecken und Öffnungen in der vorgesehenen Ausgabegröße mit dem Original. Vektorisierung rekonstruiert mögliche Geometrie; sie legt für dich keine innere oder äußere Konturausrichtung fest.

Wenn der ursprüngliche SVG-Pfad verfügbar ist, bearbeite ihn direkt. Das Nachzeichnen seines Screenshots würde einen unnötigen Rekonstruktionsschritt hinzufügen und könnte die Grenze verändern, an der du ausrichten möchtest. Unser Leitfaden zur Logo-Vektorisierung hilft dir, zwischen Nachzeichnen, Neuzeichnen und dem Behalten eines vorhandenen Vektororiginals zu wählen.

FAQ

Unterstützt SVG innere oder äußere Konturausrichtung? Ein Redaktionsentwurf zu SVG Strokes beschreibt diese Werte, erklärt aber, dass SVG 2 die normative Konturdefinition bleibt. Verwende für portable Ausgaben eine getestete Beschneidung oder Maske, statt dich auf die Entwurfseigenschaft zu verlassen.

Warum verdopple ich die Konturbreite? Eine gewöhnliche Kontur liegt zur Hälfte auf jeder Seite des Pfads. Eine Beschneidung oder Maske verwirft eine Hälfte. Eine Kontur mit 24 Einheiten hinterlässt deshalb in diesen Beispielen ein sichtbares inneres oder äußeres Band von 12 Einheiten.

Erzeugt eine innere Beschneidung oder äußere Maske schneidefertige Umrisse? Nein. Sie verändern die gerenderte Darstellung, während Pfad und Kontur erhalten bleiben. Wenn ein Schneidegerät oder Anbieter gefüllte Konturen benötigt, erstelle eine separate Ausgabekopie, konvertiere die Kontur in einem passenden Editor zu Pfaden und prüfe die Geometrie nach dem Import.

Quellen

1. MDN — Füllungen und Konturen — Definiert mittiges Konturrendering und das hier behandelte paint-order-Verhalten.
2. W3C SVG Working Group — Redaktionsentwurf zu SVG Strokes — Legt vorgeschlagene Ausrichtungswerte und den Status des Entwurfs gegenüber SVG 2 dar.
3. MDN — clipPath-Element — Definiert, wie die innere Konstruktion die Sichtbarkeit begrenzt.
4. MDN — mask-Element — Definiert Maskenbereich und Koordinatenattribute der äußeren Konstruktion.
5. Alex Chan — Innere/äußere Konturen in SVG zeichnen — Demonstriert den Ansatz mit doppelter Konturbreite, Beschneidung und Maske, der als Ausgangspunkt für unser eigenes Abzeichen diente.

Wenn dein Logo noch ein Rasterbild ist, erstelle mit PerfectVector einen SVG-Kandidaten, prüfe seine Pfadgrenze, probiere dann die innere oder äußere Konstruktion in deinem Editor aus und kontrolliere die gelieferte Datei im Zielprogramm.