SVG-Symbol-Sprites: IDs, viewBoxes und Farben erhalten

Ein SVG-Symbol-Sprite speichert benannte Icon-Definitionen in einer SVG-Datei. Jedes sichtbare Icon referenziert mit einem <use>-Element die benötigte Definition. Diese Verpackung funktioniert nur, wenn Fragment-ID, Koordinatensystem und Regeln für Füllungen und Konturen den Umzug aus einzelnen Dateien überstehen.

Beginne mit zwei Icons, bevor du einen vollständigen Ordner kombinierst. In diesem Leitfaden verwendet ein Blatt einen quadratischen und ein Rechtspfeil einen breiten Koordinatenraum. Das Blatt erscheint in zwei Farben, ohne seinen Pfad zu duplizieren. Der Pfeil behält seine Proportionen, statt in die Zeichenfläche des Blattes gezwungen zu werden.

Wenn deine Quell-Icons noch einheitliche Formen, Ränder oder optische Strichstärken brauchen, schließe zuerst den Vorbereitungsablauf für ein SVG-UI-Kit ab. Ein Sprite organisiert Grafik; es repariert sie nicht.

Erstelle zwei benannte Symboldefinitionen

Speichere dieses eigene Beispiel als sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

Der Blattname ist pv-leaf; der Pfeilname ist pv-arrow. Das sind die Kennungen, die die Seite anfordert. MDN beschreibt symbol als wiederverwendbare Grafikdefinition, die durch use instanziiert wird. Eine Datei, die nur Symbole enthält, kann beim eigenständigen Öffnen leer wirken, weil die Definitionen nicht direkt gerendert werden.

Behalte die viewBox bei der Grafik, die sie beschreibt. Hier verwendet das Blatt 0 0 24 24 und der Pfeil 0 0 32 16. Diese Zahlen definieren Koordinatengrenzen, keine erforderliche Darstellungsgröße. Die Pfeilgrenzen ohne Anpassung seiner Geometrie auf 24 mal 24 zu ändern ist keine Normalisierung. Siehe MDNs viewBox-Referenz zur Abbildung zwischen Koordinaten und Viewport.

Behalte bei einer bestehenden Icon-Familie ihr vereinbartes Raster. Die gemischten Formen hier zeigen etwas anderes: Verpackung sollte das Koordinatensystem erhalten, das du bereits freigegeben hast. Wenn ein Pfeil dem Ende einer Linie oder Kurve folgen soll, verwende SVG-Marker für ausgerichtete eigene Pfeilspitzen, um seinen Anbringungspunkt und seine Richtung zu definieren.

Referenziere das Sprite von einer Seite

Lege sprite.svg, deine HTML-Seite und icons.css in dasselbe bereitgestellte Verzeichnis. Beginne mit einer HTTP-Vorschau derselben Herkunft, damit keine lokale Dateibeschränkung oder ein anderer Host einen grundlegenden Referenzfehler verdeckt.

Füge diese Regeln zu icons.css hinzu und lade dieses Stylesheet von der Seite:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Füge dann diese Instanzen zum HTML-body hinzu:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

Der Teil vor # lokalisiert die Datei; der Teil danach wählt das Symbol. Das moderne Attribut ist href. Die use-Referenz von MDN dokumentiert externe Referenzen und warnt, dass Browser herkunftsübergreifendes Laden ablehnen können. Setze nicht voraus, dass der Umzug eines funktionierenden Sprites auf ein CDN ohne weitere Änderungen klappt; teste den tatsächlichen Auslieferungsort.

Bei der standardmäßigen Schriftgröße des Wurzelelements im Browser geben diese Regeln dem Blatt einen Rahmen von 24 mal 24 CSS-Pixeln und dem Pfeil einen von 48 mal 24. Die Größen verwenden rem, sodass eine andere Schriftgröße des Wurzelelements sie ändert. Vergleiche die Icons sowohl innerhalb der echten Komponente als auch in einer vergrößerten Vorschau: Ein korrekter Rahmen kann trotzdem Grafik mit zu viel Rand enthalten.

Der Button oben demonstriert Icon-Darstellung und Benennung. Füge bei der Verwendung in einem Produkt den eigenen Aktions-Handler der Anwendung hinzu.

Lege die Regeln für Füllungen und Konturen vor dem Kombinieren von Dateien fest

Beide Beispielpfade verwenden explizit fill="currentColor". So kann eine verwendende Instanz die umgebende CSS-Eigenschaft color nutzen: Der Button liefert Blaugrün, der Pfeil Dunkelblau. Die color-Referenz erklärt, dass currentColor den von Füllungen und Konturen verwendeten Wert liefern kann.

Verwende für das zweite Erscheinungsbild des Blattes dieselbe Referenz pv-leaf und ändere die Eigenschaft color der Instanz auf Koralle. Dupliziere den Pfad nicht nur, um eine weitere Theme-Farbe zu erzeugen.

Ersetze nicht jede Füllung eines mehrfarbigen Logos durch currentColor. Das verwirft seine Palette absichtlich. Wenn die Datei bereits vor dem Verpacken ins Sprite ihre Farbe ändert, verwende den Leitfaden zur Fehlersuche bei SVG-Farben, um dieses frühere Problem zu isolieren.

Baue außerdem keine Sprite-API darauf auf, dass beliebige Seitenselektoren in referenzierte Pfade hineinreichen. MDN weist auf Stileinschränkungen für geklonte Inhalte in use hin. Lege das gewünschte Farbverhalten in der Quellgrafik fest und teste die verwendende Komponente.

Verhindere doppelte IDs innerhalb der Grafik

Eindeutige Symbolnamen sind nötig, doch ein exportiertes SVG kann weitere interne IDs enthalten: Verläufe, Masken, Beschneidungspfade oder andere referenzierte Definitionen. MDN verlangt, dass jede SVG-id innerhalb ihres Knotenbaums eindeutig ist. Zwei zuvor getrennte Dateien können diese Regel beim Kombinieren verletzen.

Angenommen, ein Blattexport und ein Abzeichenexport enthalten beide einen Verlauf namens paint0. Versehe die Verlaufs-ID des Blattes und ihre passende Referenz gemeinsam mit einem Präfix:

Das Fragment muss weiterhin auf die beabsichtigte Definition zeigen. Die fill-Beispiele von MDN zeigen diese Beziehung zwischen Verlaufs-ID und url(#...). Gib dem Abzeichen ein eigenes Präfix, statt beide Referenzen auf den Verlauf des Blattes zeigen zu lassen.

Unser Beispiel mit zwei Pfaden hat keine verschachtelten Definitionen und eignet sich daher als erste Prüfung. Erfasse bei einem echten Export alle IDs und lokalen Referenzen, bevor du Dateien kombinierst. Wiederhole diese Bestandsaufnahme nach jedem Optimierer oder Generator am ausgelieferten Sprite. Nur das äußere Symbol umzubenennen löst doppelte interne IDs nicht.

Benenne jede sichtbare Instanz in ihrem Kontext

Das Blatt neben dem sichtbaren Wort „Garden“ wiederholt Informationen, die der Button bereits vermittelt. Sein SVG verwendet aria-hidden="true", sodass der Buttontext den Namen liefert. Halte dieses Attribut auf dem dekorativen SVG, nicht auf dem interaktiven Button. Die aria-hidden-Hinweise von MDN behandeln dekorative Inhalte und warnen vor dem Verbergen fokussierbarer Elemente.

Der eigenständige Pfeil hat eine andere Aufgabe: Er vermittelt ohne benachbarten Text eine Richtung. Sein äußeres SVG verwendet role="img" und aria-label="Right direction" (Richtung nach rechts) entsprechend MDNs Hinweisen zur Benennung eines eingebetteten SVG-Bildes.

Entscheide die Beschriftung am Verwendungsort. Ein wiederverwendbares Blatt kann in unterschiedlichen Oberflächen „Garten“, „pflanzenbasiert“ oder lediglich Dekoration bedeuten. Prüfe den für assistive Technologien zugänglichen Namen der endgültigen Komponente mit den Barrierefreiheits-Prüfwerkzeugen des Browsers und deiner Ziel-Hilfstechnologie; ein wiederverwendbares Symbol allein stellt diesen Kontext nicht her.

Prüfe das ausgelieferte Sprite, nicht nur die Quelldateien

Wir prüften dieses eigene Beispiel in einem Browser-Testaufbau derselben Herkunft. Das Blatt wurde blaugrün und korallfarben gerendert, der breite Pfeil behielt seine Form und ein bewusst fehlendes Fragment erzeugte einen leeren Icon-Rahmen. Der Barrierefreiheitsbaum des Browsers zeigte den Garden-Button und den benannten Pfeil. Das ist eine Prüfung dieser Testdatei, keine browserübergreifende oder Screenreader-Zertifizierung.

Verwende nach dem Verpacken dieselbe kleine Prüfliste:

1. Datei: Bestätige, dass die Seite das beabsichtigte Sprite von der endgültigen URL lädt.
2. Fragment: Vergleiche jedes href-Fragment mit der ausgelieferten Symbol-ID einschließlich Groß- und Kleinschreibung.
3. Grenzen: Vergleiche kleine Komponente und vergrößerte Grafik auf Beschneidung, Ränder und Seitenverhältnis.
4. Farbgebung: Rendere ein einfarbiges Icon in zwei Theme-Farben und prüfe Grafik mit festen Farben separat.
5. Interne Referenzen: Prüfe, dass Farbgebungs-, Masken- und Beschneidungsreferenzen mit Präfixen nach Optimierung noch aufgelöst werden.
6. Bedeutung: Prüfe den Namen jeder interaktiven Komponente und die Beschriftung jedes bedeutungstragenden eigenständigen Bildes.

Wenn die Datei lädt, aber eine einzelne Instanz leer ist, prüfe das Fragment, bevor du Geometrie änderst. Wenn dieselbe Grafik auch als gewöhnliches SVG leer ist, folge den umfassenderen Prüfungen für leere SVGs. Wenn sie beim Vergrößern verpixelt aussieht, suche nach einem eingebetteten Rasterbild, bevor du das Sprite als Ursache annimmst.

Wenn die einzige Quelle ein PNG-Icon ist

Wenn ein einfaches Icon nur als PNG erhalten ist, konvertiere dieses PNG mit PerfectVector in SVG, bevor du es verpackst. Prüfe die resultierende Silhouette, Löcher und Farbbereiche gegen die Quelle und akzeptiere dann seine Koordinatengrenzen und die Regeln für Füllungen und Konturen. Gib der freigegebenen Grafik schließlich stabile IDs und füge sie dem Sprite hinzu. Konvertierung liefert Vektorgrafik; sie wählt weder deine Symbolnamen noch Komponentensemantik oder Auslieferungsarchitektur.

Wenn ein sauberes Original-SVG existiert, verwende es. Erneutes Nachzeichnen führt einen weiteren Formrekonstruktionsschritt ein, ohne eine fehlerhafte Fragmentreferenz zu lösen. Durchsuche die SVG-Bearbeitungs- und Vorbereitungsleitfäden, wenn das verbleibende Problem in der Grafik statt ihrer Verpackung liegt.

FAQ

Warum ist mein SVG-Sprite beim direkten Öffnen leer? Ein Sprite, das nur Symboldefinitionen enthält, zeigt diese Symbole nicht direkt an. Teste es über eine SVG-use-Instanz mit korrektem Dateipfad und Fragment-ID, bevor du das leere Dokument als beschädigte Grafik behandelst.

Braucht jedes Symbol dieselbe viewBox? Nein. Erhalte beim Verpacken jedes freigegebene Koordinatensystem. Icons mit gemeinsamem Designsystem-Raster können gleiche Grenzen verwenden, doch ein breites Symbol wird nicht zum quadratischen Icon, nur weil du seine viewBox-Zahlen änderst.

Warum färbt eine Änderung der Seitenfarbe mein Icon nicht um? Prüfe die Regeln für Füllungen und Konturen in der Quelle. Eine feste Füllung unterscheidet sich von einem Pfad mit currentColor. Erhalte bewusst mehrfarbige Grafik und wähle explizit, welche Füllungen oder Konturen die Instanzfarbe erben sollen.

Kann ich das Sprite auf einer anderen Domain ablegen? Setze nicht voraus, dass eine externe use-Referenz herkunftsübergreifend funktioniert. Beginne mit einem Testaufbau derselben Herkunft und teste dann tatsächlichen Host und Zielbrowser, bevor du die Auslieferung änderst. Ein erfolgreiches lokales Beispiel belegt keine herkunftsübergreifende Unterstützung.

Quellen

1. MDN — symbol — Wiederverwendbare Definitionen und indirektes Rendering.
2. MDN — use — Externe Fragmente, Stileinschränkungen und Herkunftsbeschränkungen.
3. MDN — viewBox — Beziehung zwischen Koordinatengrenzen und Viewport.
4. MDN — color — currentColor als Eingabe für SVG-Farbgebung.
5. MDN — id — Eindeutigkeit von Kennungen im Dokumentbaum.
6. MDN — fill — Farbgebungsreferenzen wie Verlaufs-URLs.
7. MDN — aria-hidden — Dekorative Inhalte und Hinweise zu fokussierbaren Elementen.
8. MDN — img-Rolle — Beschriftetes äußeres SVG für ein bedeutungstragendes Bild.

Beginne mit zwei freigegebenen Icons und teste Namen, Grenzen und Farben in der tatsächlichen Komponente. Wenn eine Quelle nur als geeignetes Rasterbild existiert, rekonstruiere ihre SVG-Pfade, prüfe die Grafik und füge das akzeptierte Ergebnis dann deinem Sprite hinzu.