Definiere die Grafik einmal in einem SVG-<symbol> und verweise dann in jedem sichtbaren SVG mit <use> auf seine ID. Gib jeder Instanz eine eigene Größe und lass CSS den umgebenden Seiteninhalt anordnen. SVG-Dokumentstruktur.

Dieses Tutorial richtet sich an alle, die eine HTML-Seite auf einem Mac bearbeiten und dieselbe kleine Grafik neben mehreren Textbeschriftungen verwenden möchten. Das vollständige Beispiel verwendet synthetische Kacheln, gewöhnliches HTML und CSS. Es benötigt weder ein Framework noch JavaScript, heruntergeladene Grafiken oder einen Build-Schritt.

Wie erzeugt ein Symbol mehrere sichtbare Grafiken?

Ein <symbol> ist eine grafische Vorlage. Es wird nicht selbst angezeigt; ein <use>-Verweis erzeugt eine sichtbare Instanz. Füge die Definition einmal in das Dokument ein und dann an jeder Stelle, an der die Grafik erscheinen soll, einen kleinen SVG-Wrapper. Laut MDN sind beide Elemente weit verbreitet verfügbar. MDN: symbol.

Wichtig ist die Unterscheidung zwischen dem Vermeiden wiederholter Pfade im Quelltext und dem Vermeiden von Rendering-Arbeit im Browser. Dein HTML enthält zwar nur eine Pfaddefinition, aber der Browser erstellt für jedes <use> weiterhin eine gerenderte Instanz. MDN beschreibt dies als Klonen in ein nicht offengelegtes DOM. Wiederverwendung erleichtert die Pflege des Quelltexts; sie bedeutet nicht, dass mehrere sichtbare Grafiken zu einem einzigen gerenderten Objekt werden. MDN: use.

Bei einer Seite mit Beschriftungen und Symbolen sollten die Beschriftungen im HTML bleiben und jedes Symbol einen eigenen SVG-Wrapper erhalten. WHATWG stuft SVG in HTML als eingebetteten Inhalt, Phrasing-Content und Flow-Content ein. Das ermöglicht es, solche Wrapper zwischen gewöhnlichen Seiteninhalten zu platzieren. HTML-Standard: SVG.

Erstelle eine vollständige Seite mit einer Definition und drei Instanzen

Erstelle in einem Nur-Text-Editor auf deinem Mac eine Datei mit dem Namen svg-reuse.html. Füge das vollständige Dokument unten ein, speichere es und öffne es in deinem Desktop-Browser. Behalte die Erweiterung .html bei und speichere die Datei als Nur-Text-Dokument, nicht als Rich-Text-Dokument.

Das Beispiel definiert zwei diagonale Kacheln mit einem einzigen <path>. Drei Verweise zeigen dieselbe Geometrie in unterschiedlichen Größen und Farben. Jeder Verweis verwendet href="#demo-tiles"; die einfache Form href ist die aktuelle Schreibweise, während xlink:href veraltet ist. MDN: use-Attribute.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reusable tile symbol</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #263445;
    }
    .symbol-bank {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }
    .sample {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border: 1px solid #cbd5df;
    }
    .icon {
      display: block;
      width: 24px;
      height: 24px;
      flex: none;
    }
    .icon-large { width: 48px; height: 48px; }
    .icon-medium { width: 32px; height: 32px; }
    .blue { color: #2457a7; }
    .purple { color: #7140a0; }
  </style>
</head>
<body>
  <svg class="symbol-bank" width="0" height="0" aria-hidden="true">
    <symbol id="demo-tiles" viewBox="0 0 24 24"
            preserveAspectRatio="xMidYMid meet">
      <path fill="currentColor"
            d="M4 4H10V10H4Z M14 14H20V20H14Z"></path>
    </symbol>
  </svg>

  <main>
    <h1>Tile samples</h1>
    <div class="samples">
      <div class="sample">
        <svg class="icon" width="24" height="24"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Small tiles</span>
      </div>

      <div class="sample blue">
        <svg class="icon icon-large" width="48" height="48"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Large tiles</span>
      </div>

      <div class="sample purple">
        <svg class="icon icon-medium" width="32" height="32"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Medium tiles</span>
      </div>
    </div>
  </main>
</body>
</html>

Das erwartete Ergebnis sind drei umrandete Beispiele mit denselben diagonalen Kacheln. Das erste verwendet die Textfarbe des Fließtexts, das zweite Blau und das dritte Violett. Ihre SVG-Boxen sind 24, 48 beziehungsweise 32 CSS-Pixel groß. Verkleinere das Browserfenster, um zu prüfen, wie die Beispiele umbrechen.

Die sichtbaren Formen sind hier dekorativ, weil die benachbarten Beschriftungen den Inhalt vermitteln. Deshalb verwenden die SVG-Wrapper aria-hidden="true". Dadurch werden sie aus dem Accessibility Tree entfernt, ohne sie visuell auszublenden. Verwende diese Einstellung für dekorative Grafiken; wende sie nicht auf ein Bild an, das Informationen enthält, die im Text fehlen. MDN: aria-hidden.

Welche Einstellungen steuern das Seitenlayout und das SVG-Layout?

Es gibt drei getrennte Aufgaben: die Anordnung der HTML-Komponenten, die Größe jeder SVG-Box und die Abbildung der Zeichnung in diese Box. Wenn du die Einstellung für eine Aufgabe änderst, bleiben die anderen beiden möglicherweise unverändert.

Aufgabe Einstellung im Beispiel Was ändern?
Beispiele auf der Seite anordnen .samples verwendet Flexbox und Zeilenumbruch Hier Abstand oder Umbruch ändern
Jede Grafik an ihrer Beschriftung ausrichten .sample verwendet Flexbox und align-items: center Hier die Ausrichtung der Komponente ändern
Die angezeigte SVG-Box festlegen .icon und seine Größenklassen Hier CSS-Breite und -Höhe ändern
Zeichenkoordinaten definieren viewBox="0 0 24 24" Dies ändern, wenn sich die Koordinatengrenzen der Grafik ändern
Das referenzierte Symbol intern skalieren <use> hat eine Breite und Höhe von 24 Diese Werte an den internen Koordinatenbereich dieses Beispiels anpassen
Die Zeichnung proportional einpassen preserveAspectRatio="xMidYMid meet" Dies nur ändern, wenn ein anderes Einpassungsverhalten gewünscht ist

Flexbox ordnet die direkten Kindelemente eines Flex-Containers an. Der äußere Container ordnet also die Beispiele an, und jeder innere Container ordnet ein SVG neben einer Beschriftung an. Flexbox arbeitet jeweils entlang einer Dimension; umgebrochene Zeilen verteilen ihren Platz unabhängig voneinander. Für ein Design mit aufeinander abgestimmten Zeilen und Spalten ist CSS Grid die passende Alternative für das Seitenlayout. MDN: Grundlegende Konzepte von Flexbox.

Innerhalb von SVG hat <use> ein anderes Layoutmodell. Seine Werte x und y verschieben Grafiken im SVG-Koordinatensystem. Sie legen nicht den Abstand zwischen HTML-Komponenten fest. Breite und Höhe können den Darstellungsbereich eines referenzierten Symbols festlegen; sie bieten keine allgemeine Skalierungssteuerung für einen direkt referenzierten Pfad oder eine Gruppe. W3C: Layout wiederverwendeter Grafiken.

Warum verwendet die große Instanz intern weiterhin die Maße 24?

Das viewBox des äußeren SVG beschreibt einen Koordinatenbereich von 24 mal 24. Seine CSS-Box kann 48 mal 48 Pixel groß sein, während die internen Koordinaten unverändert bleiben. Das <use> füllt den internen Bereich von 24 mal 24 aus, und das äußere SVG bildet ihn auf die größere angezeigte Box ab. Laut MDN besteht viewBox aus vier Zahlen: dem minimalen x-Wert, dem minimalen y-Wert, der Breite und der Höhe. MDN: viewBox.

Als Beispielrechnung für genau diese Grafik bildet eine 48-Pixel-Box 24 Koordinateneinheiten mit einem Skalierungsfaktor von 48 / 24 = 2 ab. Die Geometrie der Kacheln erstreckt sich über die Koordinaten 4 bis 20, sodass ihre gesamte bemalte Fläche (20 - 4) × 2 = 32 Pixel groß wird. Der übrige Platz stammt von den bewusst vorgesehenen Rändern innerhalb der Zeichnung.

Das erklärt, warum eine Vergrößerung der CSS-Breite eines Symbols nicht zwangsläufig dazu führt, dass seine bemalte Form die gesamte Breite ausfüllt. Prüfe die Grenzen der Geometrie innerhalb der viewBox, bevor du zum Ausgleich die Seitenränder anpasst.

Was passiert in einer rechteckigen SVG-Box?

Mit xMidYMid meet wird die Zeichnung gleichmäßig skaliert, zentriert und vollständig in den verfügbaren Viewport eingepasst. Eine quadratische Zeichnung lässt daher in einem breiten Rechteck an den Seiten Platz frei. none erlaubt Verzerrungen; slice erhält die Proportionen, lässt aber einen Teil der viewBox über den Viewport hinausragen. Verwende meet, wenn die gesamte Grafik sichtbar bleiben soll. MDN: preserveAspectRatio.

Wie kann jede Instanz eine eigene Farbe erhalten?

Der Pfad verwendet fill="currentColor". Dieses Schlüsselwort übernimmt den Wert color des Elements, sodass sich dieselbe Zeichnung an die Textfarbe der Umgebung anpassen kann. Im Beispiel ändert eine Anpassung der Regel .blue oder .purple sowohl die Beschriftung als auch die Kacheln. MDN: Schlüsselwort currentColor.

Das funktioniert über die Vererbung in jede Instanz. Das Wiederverwendungsmodell von SVG übernimmt geerbte Stile des <use>-Elements in den generierten Inhalt. Eine festgelegte Farbe, die direkt auf dem Quellpfad deklariert ist, hat Vorrang vor einer von einem übergeordneten Element geerbten Füllfarbe. Wenn Instanzen unterschiedlich eingefärbt werden sollen, sollte die gemeinsame Geometrie keine festgelegten Farben enthalten. W3C: Geltungsbereich und Vererbung von Stilen.

Verlasse dich nicht darauf, dass ein Selektor wie .blue path über den sichtbaren Wrapper auf einen generierten Pfad zugreift. Der generierte Inhalt gehört zum Shadow Tree der Wiederverwendung, daher unterscheiden sich die Beziehungen zu übergeordneten Elementen von denen in gewöhnlichem verschachteltem HTML. Setze color auf den Wrapper oder seinen Container und behalte currentColor in der Quellgeometrie bei. W3C: Geltungsbereich und Vererbung von Stilen.

Was solltest du prüfen, wenn ein wiederverwendetes Symbol falsch aussieht?

Beginne beim Verweis und arbeite dich nach außen vor. Diese Reihenfolge hilft, eine fehlende Grafik von einer falsch skalierten oder positionierten zu unterscheiden, damit jede Anpassung auf den jeweiligen Mechanismus zielt.

  1. Prüfe das Ziel. Stelle sicher, dass href="#demo-tiles" mit id="demo-tiles" der Definition übereinstimmt. Die ID muss im Dokumentbaum eindeutig sein. W3C: Das id-Attribut.
  2. Prüfe die Maße des sichtbaren Wrappers. Verwende die Klasse .symbol-bank mit Größe null nur für den Definitionscontainer. Jede sichtbare Instanz braucht eine Box mit einer Größe ungleich null, wie bei .icon.
  3. Prüfe die Koordinatengrenzen. Stelle sicher, dass die Grafik innerhalb der deklarierten viewBox liegt. Unerwarteter Leerraum kann durch ungenutzte Zeichenkoordinaten entstehen. MDN: viewBox.
  4. Prüfe den Typ des referenzierten Elements. Wenn du das Symbol durch einen direkten Pfadverweis ersetzt hast, wird es durch eine Änderung der Breite und Höhe von <use> nicht auf dieselbe Weise skaliert. Verwende für dieses Muster wieder das Symbol und sein viewBox. MDN: use.
  5. Prüfe die Farbdeklarationen. Suche nach festgelegten Quellfarben, bevor du weitere Selektoren für Instanzen hinzufügst.
  6. Prüfe den Seitencontainer. Wenn die Grafik korrekt gerendert wird, aber zu weit von ihrer Beschriftung entfernt ist, passe den CSS-Abstand oder die Ausrichtung der Komponente an. MDN: Grundlegende Konzepte von Flexbox.

Wenn du das Beispiel in eine bestehende Seite integrierst, füge den Symbolbereich einmal ein, übernimm das CSS und kopiere nur den sichtbaren SVG-Wrapper in zusätzliche Komponenten. Das kleine Dokument wurde strukturell auf ausgeglichene Elemente, eindeutige IDs und drei Verweise geprüft, die auf eine Pfaddefinition zeigen. Diese Prüfungen bestätigen jedoch nicht, dass es im Browser korrekt gerendert wird. Öffne die Seite in den Mac-Browsern, die du unterstützen möchtest, und überprüfe Größe, Abstände und Farbe.

Um die gemeinsame Zeichnung zu ändern, bearbeite ihre einzelne Pfaddefinition. Um eine einzelne Instanz zu ändern, bearbeite ihre Wrapper-Größe oder die geerbte Farbe. Wenn diese Zuständigkeiten getrennt bleiben, erhältst du wiederverwendbare Grafiken und kannst zuverlässig steuern, wo jede Instanz erscheint.

Quellen