SVG-Verlaufseinheiten: Ein Verlauf über Logopfade

Um einen Verlauf über separate SVG-Pfade zu verteilen, verwende gradientUnits="userSpaceOnUse", setze die Endpunkte in den Grafikkoordinaten und halte die Pfade im selben Koordinatensystem. Jeder Pfad zeigt dann den Teil des Verlaufs an seiner Position. Die Logoteile können separat bearbeitbar bleiben.

Der Standardwert objectBoundingBox passt den Verlauf an jedes bemalte Element an. Wenn drei Pfade dieselbe Verlaufs-ID referenzieren, können deshalb drei vollständige Übergänge von Violett zu Orange entstehen. Das Ändern der Einheiten behebt diese Wiederholung, aber ein transformiertes Kindelement kann seine eigene Farbe weiterhin verschieben. MDNs Referenz zu gradientUnits definiert den Referenzraum als aktuellen Benutzerraum des Elements, das den Verlauf verwendet.

Diese Anleitung verwendet ein eigenes dreiteiliges Emblem, das direkt als SVG-Pfade gezeichnet wurde. Wenn du bereits ein Vektorlogo hast, arbeite mit diesem Original. Eine reine Rasterquelle benötigt vor dieser Farbbearbeitung eine Geometrierekonstruktion; der umfassendere Leitfaden zur Verlaufsvektorisierung erklärt diese Entscheidung.

Entscheide, ob der Verlauf zu jeder Form oder zum ganzen Zeichen gehört

Verwende objektbezogene Farbe, wenn jeder Teil seinen eigenen vollständigen Verlauf erhalten soll. Verwende gemeinsame Benutzerraum-Endpunkte, wenn die linken und rechten Teile unterschiedliche Farben aus einem Übergang aufnehmen sollen.

fill="url(#brandBlend)" auf einer Gruppe reicht die Füllung an ihre untergeordneten Elemente weiter. Dadurch misst ein objektbezogener Verlauf aber nicht die gemeinsame Silhouette der Gruppe. Die untergeordneten Elemente erhalten weiterhin ihre eigenen Füllungen. Die SVG-Spezifikation zu Farbressourcen beschreibt Verläufe als Ressourcen, die von Füllung oder Kontur eines Elements referenziert werden.

Ein Emblem, vier Koordinatenentscheidungen

Setze Endpunkte, die die Grafik umfassen

Die Pfade des Beispiels liegen horizontal zwischen x=30 und x=310. Das sind die Endpunkte des Verlaufs. Das Dreieck endet bei x=125, der mittlere Block reicht von 140 bis 210, und die rechte Form von 225 bis 310.

Speichere dies als shared-logo.svg und öffne es im Browser:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Du solltest wie in B ein violettes Dreieck, einen überwiegend rosa Mittelblock und eine orange getönte rechte Form sehen. Die leeren Zwischenräume verdecken Abschnitte desselben Verlaufs; die Farbe beginnt nicht erneut, wenn der nächste Pfad anfängt. Ändere einen Farbstopp, und alle drei Teile werden aktualisiert, weil sie dieselbe Definition referenzieren.

Für einen direkten Vergleich mit A ersetze die Attribute gradientUnits, x1, y1, x2 und y2 des Verlaufs durch x1="0%" y1="0%" x2="100%" y2="0%". Das Weglassen von gradientUnits stellt den Standardwert wieder her. Jede Form erhält jetzt den gesamten Farbübergang.

Auch Prozentwerte haben eine andere Referenz: Mit userSpaceOnUse beziehen sie sich auf den aktuellen SVG-Viewport statt auf den Begrenzungsrahmen des bemalten Objekts. Explizit angegebene Zahlen machen dieses Beispiel leichter prüfbar. Ein Logo, das nur einen Teil einer großen viewBox belegt, muss für seinen Verlauf nicht deren volle Breite verwenden.

Prüfe Transformationen, wenn ein Teil die falsche Farbe hat

In C sieht die rechte Form aus, als wäre sie an ihrem Platz geblieben. Ihre Pfadkoordinaten wurden 60 Einheiten nach links verschoben und eine untergeordnete Gruppe verschob sie 60 Einheiten nach rechts:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Ersetze den dritten Pfad im vollständigen Beispiel durch diese Gruppe, um den Unterschied zu reproduzieren. Seine sichtbare linke Kante bleibt bei x=225, aber seine lokale linke Kante liegt bei x=165. Der Verlauf verwendet diesen lokalen Raum, deshalb erhält der Teil einen früheren, rosafarbenen Abschnitt des Verlaufs. userSpaceOnUse verspricht kein global einheitliches Koordinatensystem unabhängig von verschachtelten Transformationen.

Stelle für dieses Emblem die ursprünglichen Koordinaten des dritten Pfads wieder her und entferne seine eigene Verschiebung. Wenn das gesamte Logo verschoben werden muss, wende stattdessen transform="translate(10 0)" auf die vorhandene äußere Gruppe an. So entsteht D: Alle drei Formen und ihre gemeinsamen Farben bewegen sich zusammen.

Diese Korrektur funktioniert, weil die Pfade bereits in einem gemeinsamen Koordinatensystem ausgedrückt sind. Unterschiedlich transformierte untergeordnete Elemente in eine weitere Gruppe zu setzen entfernt ihre einzelnen Transformationen nicht. Prüfe bei einem importierten Logo diese Transformationen, bevor du sie einrechnest oder Geometrie umschreibst, und behalte eine Kopie des ursprünglichen Originals.

Wann gradientTransform nützlich ist

gradientTransform verändert die Koordinatenabbildung der Farbe, ohne die Pfadgeometrie zu ändern. Es ist nützlich, wenn du einen Verlauf bewusst drehen, scheren oder neu positionieren musst. MDN dokumentiert es als zusätzliche Transformation, die angewendet wird, nachdem das durch gradientUnits gewählte Koordinatensystem feststeht.

Passe nicht eine gemeinsame Definition an, um ein einzelnes untergeordnetes Element zu korrigieren, ohne die anderen zu prüfen. Jede Form, die diese Definition referenziert, kann betroffen sein. Für das einfache Logo hier ist ein gemeinsamer Grafikraum leichter zu pflegen; komplexere importierte Grafiken benötigen möglicherweise separat zugeordnete Verlaufsdefinitionen.

Wo PerfectVector hineinpasst

Wenn die einzige Quelle ein PNG- oder JPG-Logo ist, kann PerfectVector vor dem Neuaufbau des abgestimmten Verlaufs bearbeitbare Vektorgeometrie rekonstruieren. Vektorisiere das Logo und prüfe dann Silhouette, Löcher und einzelne Teile in deinem Editor. Verwende diese Formen als Ausgangspunkt für die gemeinsame Füllung.

Die obige Demonstration wurde von Hand erstellt, um das Koordinatenverhalten zu isolieren; sie ist kein PerfectVector-Konvertierungsergebnis. Gehe nicht davon aus, dass das Nachzeichnen schattierter Pixel die ursprünglichen Farbstopps oder Koordinateneinstellungen rekonstruiert. Ein einfaches Logo lässt sich möglicherweise auch schneller manuell neu zeichnen. Behalte ein vorhandenes SVG, AI oder Vektor-PDF.

Wenn eine Form eine neue Füllung nicht annimmt, nutze die Prüfungen zur SVG-Umfärbung, bevor du Verlaufskoordinaten änderst. Wenn derselbe Export zwischen Anwendungen abweicht, folge der Diagnose zu SVG-Farbverschiebungen.

Öffne die Datei vor der Weitergabe erneut

Speichere ein neues SVG und teste genau diese Datei, nicht nur die Editorzeichenfläche. Prüfe Folgendes:

• Die Verlaufs-ID existiert und jeder gewünschte Pfad referenziert sie.
• Der Verlauf deckt die Logogrenzen in der vorgesehenen Richtung ab.
• Beim Verschieben des gesamten Zeichens bleiben die Farben abgestimmt.
• Separate Teile bleiben dort auswählbar, wo du sie bearbeiten musst.
• Die empfangende Anwendung erhält die erwartete Darstellung.

Eine glatte Browserdarstellung demonstriert das Farbverhalten in diesem Browser. Sie belegt keine Unterstützung in jedem Editor und verwandelt den Verlauf nicht in Schneidegeometrie. Behalte eine Version mit einfarbigen Füllungen für Workflows, die vollflächige Formen benötigen und das bearbeitbare SVG-Original. Der SVG-Dateileitfaden erklärt den Unterschied zwischen geometrischem Dateiinhalt und angezeigter Darstellung.

FAQ

Muss ich Pfade zusammenführen, um einen Verlauf zu teilen? Nein. Separate Pfade können einen Verlauf referenzieren. Verwende userSpaceOnUse mit passenden Endpunkten und stelle sicher, dass die Pfade das gewünschte Koordinatensystem teilen.

Warum wiederholt sich der Verlauf trotz Gruppierung der Pfade? Eine Gruppe kann ihre Füllung an untergeordnete Pfade weitergeben, aber ein objectBoundingBox-Verlauf verwendet weiterhin die Grenzen jedes bemalten untergeordneten Elements. Setze Benutzerraum-Endpunkte, wenn der Verlauf das gesamte Zeichen umfassen soll.

Warum änderte sich die Farbe eines Pfads, nachdem ich ihn in eine Gruppe verschoben habe? Eine Transformation dieser Gruppe kann das lokale Koordinatensystem des Pfads verändern. Vergleiche seine Transformationen mit den anderen Pfaden und teste das exportierte SVG, bevor du den gemeinsamen Verlauf anpasst.

Quellen

1. MDN — gradientUnits — Definiert Standardwert, Referenzkoordinatensysteme und Prozentverhalten.
2. SVG Working Group — Farbressourcen — Spezifiziert wiederverwendbare Verlaufsfüllungen, Farbstopps und Ausdehnungsverhalten.
3. MDN — gradientTransform — Erklärt zusätzliche Transformationen von Verlaufskoordinaten.

Beginnst du mit einem Rasterlogo? Wandle dein Logo in bearbeitbare SVG-Pfade um, prüfe die separaten Formen, baue dann den gemeinsamen Verlauf neu auf und öffne den fertigen Export erneut, um seine Ausrichtung zu kontrollieren.