Definiera grafiken en gång i en SVG-<symbol> och referera sedan till dess ID med <use> inuti varje synlig SVG. Ge varje instans sin egen storlek och låt CSS ordna den omgivande sidan. SVG-dokumentstruktur.

Den här handledningen riktar sig till dig som redigerar en HTML-sida på en Mac och vill ha samma lilla grafik bredvid flera textetiketter. Det fullständiga exemplet använder syntetiska plattor, vanlig HTML och CSS. Det kräver inget ramverk, ingen JavaScript, ingen nedladdad grafik och inget byggsteg.

Hur kan en symbol skapa flera synliga grafiker?

En <symbol> är en grafisk mall. Den visas inte på egen hand; en <use>-referens skapar en synlig instans. Lägg definitionen en gång i dokumentet och lägg sedan till en liten SVG-behållare där grafiken ska visas. MDN anger att båda elementen har brett stöd. MDN: symbol.

Det viktiga är att skilja mellan att slippa upprepa banor i källkoden och att slippa renderingsarbete i webbläsaren. HTML-koden innehåller en banedefinition, men webbläsaren skapar fortfarande en renderad instans för varje <use>. MDN beskriver detta som kloning till en DOM som inte exponeras. Återanvändning gör källkoden enklare att underhålla; det betyder inte att flera synliga grafiker blir ett enda renderat objekt. MDN: use.

För en sida med etiketter och ikoner behåller du etiketterna i HTML och ger varje ikon en egen SVG-behållare. WHATWG räknar SVG som inbäddat innehåll, fraseringsinnehåll och flödesinnehåll i HTML, vilket gör det möjligt att placera sådana behållare bland vanligt sidinnehåll. HTML-standarden: SVG.

Skapa en komplett sida med en definition och tre instanser

Skapa en fil med namnet svg-reuse.html i en vanlig textredigerare på din Mac. Klistra in hela dokumentet nedan, spara det och öppna det i webbläsaren på datorn. Behåll filändelsen .html och spara som vanlig text, inte som ett dokument med formaterad text.

Exemplet definierar två diagonala plattor med ett enda <path>. Tre referenser visar samma geometri i olika storlekar och färger. Varje referens använder href="#demo-tiles"; vanlig href är den aktuella formen, medan xlink:href är föråldrat. MDN: use-attribut.

<!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>

Resultatet ska vara tre prover med ramar som innehåller samma diagonala plattor. Det första använder textfärgen från sidans brödtext, det andra är blått och det tredje lila. Deras SVG-rutor är 24, 48 respektive 32 CSS-pixlar stora. Gör webbläsarfönstret smalare för att kontrollera hur proverna radbryts.

De synliga formerna är dekorativa här eftersom de intilliggande etiketterna förmedlar innehållet. Därför använder SVG-behållarna aria-hidden="true". Det tar bort dem från hjälpmedlens tillgänglighetsträd utan att dölja dem visuellt. Använd den här lösningen för dekorativ grafik; använd den inte för bilder som förmedlar information som saknas i texten. MDN: aria-hidden.

Vilka inställningar styr sidlayouten respektive SVG-layouten?

Det handlar om tre separata uppgifter: att ordna HTML-komponenterna, att ange storleken på varje SVG-ruta och att anpassa teckningen till rutan. Om du ändrar inställningen för en uppgift kan de andra två förbli opåverkade.

Uppgift Inställning i exemplet Vad du ska ändra
Ordna proverna på sidan .samples använder flexbox och radbrytning Ändra avstånd eller radbrytning här
Justera grafiken i förhållande till etiketten .sample använder flexbox och align-items: center Ändra komponentens justering här
Ange storleken på den visade SVG-rutan .icon och dess storleksklasser Ändra CSS-bredd och höjd här
Definiera teckningens koordinater viewBox="0 0 24 24" Ändra detta när grafikens koordinatgränser ändras
Ange storleken på den refererade symbolen internt <use> har bredden och höjden 24 Se till att dessa värden stämmer med exempelns interna koordinatområde
Anpassa teckningen proportionerligt preserveAspectRatio="xMidYMid meet" Ändra detta endast när du vill ha ett annat anpassningsbeteende

Flexbox ordnar de direkta barnen i en flexbehållare. Den yttre behållaren ordnar därför proverna, och varje inre behållare ordnar en SVG bredvid en etikett. Flexbox arbetar längs en dimension i taget; utrymmet fördelas separat på varje rad som radbryts. CSS Grid är ett alternativ för sidlayout när en design kräver samordnade rader och kolumner. MDN: Grundläggande begrepp om flexbox.

Inuti SVG har <use> en annan layoutmodell. Dess värden för x och y förskjuter grafiken i SVG-koordinatsystemet. De anger inte avståndet mellan HTML-komponenter. Bredd och höjd kan ange storleken på visningsytan för en refererad symbol; de är inte ett generellt reglage för skalning av en direkt refererad bana eller grupp. W3C: Layout för återanvänd grafik.

Varför har den stora instansen fortfarande interna mått på 24?

Den yttre SVG:ns viewBox beskriver ett koordinatområde på 24 gånger 24. Dess CSS-ruta kan vara 48 gånger 48 pixlar utan att de interna koordinaterna ändras. <use> fyller det interna området på 24 gånger 24, och den yttre SVG:n anpassar det till den större visade rutan. MDN definierar viewBox som fyra tal: minsta x, minsta y, bredd och höjd. MDN: viewBox.

Som ett illustrativt exempel med just den här grafiken innebär en ruta på 48 pixlar att 24 koordinatenheter skalas med 48 / 24 = 2. Plattornas geometri sträcker sig från koordinat 4 till 20, så den totala målade ytan blir (20 - 4) × 2 = 32 pixlar. Återstående utrymme kommer från de avsiktliga marginalerna inuti teckningen.

Det förklarar varför en ökning av ikonens CSS-bredd inte nödvändigtvis gör att den målade formen fyller hela bredden. Kontrollera geometrins gränser inom viewBox innan du justerar sidmarginalerna för att kompensera.

Vad händer i en rektangulär SVG-ruta?

Med xMidYMid meet skalas teckningen jämnt, centreras och anpassas så att hela viewBox ryms i den tillgängliga visningsytan. En kvadratisk teckning i en bred rektangel lämnar därför utrymme på sidorna. none tillåter förvrängning; slice bevarar proportionerna men låter en del av viewBox sträcka sig utanför visningsytan. Använd meet när hela grafiken ska förbli synlig. MDN: preserveAspectRatio.

Hur kan varje instans ha en egen färg?

Banan använder fill="currentColor". Nyckelordet hämtar elementets värde för color, vilket gör att samma teckning kan följa den omgivande textfärgen. I exemplet ändrar en redigering av regeln .blue eller .purple både etiketten och dess plattor. MDN: nyckelordet currentColor.

Detta fungerar genom arv till varje instans. SVG:s återanvändningsmodell ger det genererade innehållet stilar som ärvs från <use>-värdeelementet. En fast färg som anges direkt på källbanan har företräde framför en ärvd fyllningsfärg från ett överordnat element. Låt den delade geometrin vara fri från fasta färger när varje instans behöver kunna färgsättas separat. W3C: Stilomfång och arv.

Förlita dig inte på en väljare som .blue path för att nå en genererad bana via den synliga behållaren. Det genererade innehållet tillhör återanvändningens skuggträd, så relationerna mellan överordnade element skiljer sig från vanlig nästlad HTML. Ange color på behållaren eller dess överordnade element och behåll currentColor i källgeometrin. W3C: Stilomfång och arv.

Vad bör du kontrollera när en återanvänd symbol ser fel ut?

Börja med referensen och arbeta utåt. Den här ordningen skiljer en saknad grafik från en grafik med fel storlek eller placering, så varje justering åtgärdar en specifik mekanism.

  1. Kontrollera målet. Bekräfta att href="#demo-tiles" stämmer med definitionens id="demo-tiles". Se till att ID:t är unikt i dokumentträdet. W3C: id-attributet.
  2. Kontrollera den synliga behållarens mått. Behåll klassen .symbol-bank med storleken noll endast på definitionsbehållaren. Varje synlig instans behöver en ruta som inte är nollstor, vilket .icon visar.
  3. Kontrollera koordinatgränserna. Bekräfta att grafiken ryms inom den angivna viewBox. Oväntat tomrum kan bero på oanvända teckningskoordinater. MDN: viewBox.
  4. Kontrollera typen på det refererade elementet. Om du ersatte symbolen med en direkt referens till en bana skalas den inte på samma sätt när du ändrar bredd och höjd på <use>. Återställ symbolen och dess viewBox för det här mönstret. MDN: use.
  5. Kontrollera färgdeklarationerna. Leta efter fasta källfärger innan du lägger till fler instansväljare.
  6. Kontrollera sidbehållaren. Om grafiken renderas korrekt men ligger för långt från sin etikett justerar du komponentens CSS-avstånd eller justering. MDN: Grundläggande begrepp om flexbox.

När du integrerar exemplet på en befintlig sida infogar du symbolbehållaren en gång, sammanfogar CSS-koden och kopierar endast den synliga SVG-behållaren till ytterligare komponenter. Det lilla dokumentet genomgick strukturella kontroller av balanserade element, unika ID:n och tre referenser som pekar på en banedefinition; de kontrollerna fastställer inte hur det renderas i webbläsaren. Öppna sidan i de Mac-webbläsare du tänker stödja och granska storlek, avstånd och färg.

Ändra den enda banedefinitionen för att ändra den delade teckningen. Ändra storleken eller den ärvda färgen för behållaren om du vill ändra en enskild instans. Om du håller dessa ansvarsområden åtskilda får du återanvändbar grafik och förutsägbar kontroll över var varje instans visas.

Källor