Sprite’y symboli SVG: zachowaj identyfikatory, viewBox i kolory

Sprite symboli SVG przechowuje nazwane definicje ikon w jednym pliku SVG. Każda widoczna ikona używa elementu <use>, aby odwołać się do potrzebnej definicji. Takie pakowanie działa tylko wtedy, gdy identyfikator fragmentu, układ współrzędnych i reguły kolorowania zostają zachowane przy przenoszeniu z osobnych plików.

Zacznij od dwóch ikon, zanim połączysz cały folder. W tym poradniku liść używa kwadratowej przestrzeni współrzędnych, a strzałka w prawo — szerokiej. Liść pojawi się w dwóch kolorach bez powielania jego ścieżki. Strzałka zachowa swoje proporcje zamiast zostać wtłoczona w obszar rysowania liścia.

Jeśli Twoje ikony źródłowe nadal wymagają ujednolicenia kształtów, odstępów od krawędzi lub ciężaru optycznego, najpierw ukończ proces przygotowania SVG do zestawu UI. Sprite porządkuje grafikę; nie naprawia jej.

Utwórz dwie nazwane definicje symboli

Zapisz ten autorski przykład jako 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>

Nazwa liścia to pv-leaf, a nazwa strzałki to pv-arrow. To właśnie do tych identyfikatorów będzie odwoływać się strona. MDN opisuje symbol jako definicję grafiki wielokrotnego użytku, której instancje tworzy się za pomocą use. Plik zawierający wyłącznie symbole może wyglądać na pusty po samodzielnym otwarciu, ponieważ definicje nie są renderowane bezpośrednio.

Zachowaj viewBox razem z grafiką, którą opisuje. Tutaj liść używa 0 0 24 24, a strzałka — 0 0 32 16. Te liczby określają granice układu współrzędnych, a nie wymagany rozmiar wyświetlania. Zmiana granic strzałki na 24 na 24 bez dostosowania jej geometrii nie jest normalizacją. Zobacz opis viewBox w MDN, aby poznać odwzorowanie współrzędnych na obszar wyświetlania.

W przypadku istniejącej rodziny ikon zachowaj uzgodnioną siatkę. Różne kształty w tym przykładzie pokazują coś innego: pakowanie powinno zachować wcześniej zaakceptowany układ współrzędnych. Jeśli strzałka ma być umieszczona na końcu linii lub krzywej, użyj markerów SVG do wyrównywania niestandardowych grotów strzałek, aby określić jej punkt mocowania i kierunek.

Odwołaj się do sprite’a ze strony

Umieść sprite.svg, swoją stronę HTML i icons.css w tym samym katalogu udostępnianym przez serwer. Zacznij od podglądu przez HTTP w obrębie tego samego originu, aby ograniczenie dotyczące plików lokalnych lub inny host nie przesłoniły podstawowego błędu odwołania.

Dodaj te reguły do icons.css i załaduj ten arkusz stylów na stronie:

.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;
}

Następnie dodaj te instancje do sekcji body dokumentu HTML:

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

Część przed # wskazuje plik, a część po nim wybiera symbol. Współczesnym atrybutem jest href. Opis use w MDN dokumentuje odwołania zewnętrzne i ostrzega, że przeglądarki mogą odmawiać ładowania zasobów z innego originu. Nie zakładaj, że przeniesienie działającego sprite’a do CDN nie wymaga dodatkowych zmian; przetestuj rzeczywistą lokalizację, z której będzie udostępniany.

Przy domyślnym rozmiarze czcionki elementu głównego w przeglądarce te reguły nadają liściowi pole o wymiarach 24 na 24 piksele CSS, a strzałce — 48 na 24. Rozmiary są wyrażone w jednostkach rem, więc inny rozmiar czcionki elementu głównego je zmieni. Porównaj ikony zarówno w rzeczywistym komponencie, jak i w powiększonym podglądzie: prawidłowe pole może nadal zawierać grafikę ze zbyt dużymi odstępami od krawędzi.

Powyższy przycisk pokazuje sposób prezentacji i nazywania ikony. Gdy użyjesz go w produkcie, dodaj obsługę akcji właściwą dla swojej aplikacji.

Wybierz regułę kolorowania przed połączeniem plików

Obie ścieżki w przykładzie jawnie używają fill="currentColor". Dzięki temu instancja korzystająca z symbolu może używać wartości CSS color z otaczającego kontekstu: przycisk dostarcza kolor turkusowy, a strzałka — granatowy. Opis color wyjaśnia, że currentColor może dostarczać wartość używaną przez wypełnienia i obrysy.

Przy drugim wystąpieniu liścia użyj tego samego odwołania pv-leaf i zmień color instancji na koralowy. Nie powielaj ścieżki tylko po to, aby utworzyć kolejny kolor motywu.

Nie zastępuj każdego wypełnienia w wielokolorowym logo wartością currentColor. Taka zmiana z założenia usuwa paletę. Jeśli plik zmienia kolor jeszcze przed spakowaniem do sprite’a, skorzystaj z poradnika rozwiązywania problemów z kolorami SVG, aby wyodrębnić ten wcześniejszy problem.

Unikaj też budowania API sprite’a wokół dowolnych selektorów strony sięgających do ścieżek, do których prowadzi odwołanie. MDN wskazuje ograniczenia stylowania sklonowanej zawartości w opisie use. Zapisz zamierzony sposób kolorowania w grafice źródłowej i przetestuj komponent, który z niej korzysta.

Zapobiegaj powielaniu identyfikatorów wewnątrz grafiki

Unikalne nazwy symboli są konieczne, ale wyeksportowany plik SVG może zawierać więcej identyfikatorów wewnętrznych: gradientów, masek, ścieżek przycinania lub innych definicji, do których prowadzą odwołania. MDN wymaga, aby każdy id w SVG był unikalny w obrębie swojego drzewa węzłów. Dwa wcześniej osobne pliki mogą naruszyć tę regułę po połączeniu.

Załóżmy na przykład, że zarówno eksport liścia, jak i eksport odznaki zawierają gradient o nazwie paint0. Dodaj prefiks jednocześnie do identyfikatora gradientu liścia i odpowiadającego mu odwołania:

Fragment musi nadal wskazywać zamierzoną definicję. Przykłady fill w MDN pokazują tę zależność między identyfikatorem gradientu a url(#...). Nadaj odznace własny prefiks zamiast kierować oba odwołania do gradientu liścia.

Nasz przykład z dwiema ścieżkami nie zawiera zagnieżdżonych definicji, dlatego dobrze nadaje się do pierwszego sprawdzenia. W przypadku rzeczywistego eksportu sporządź wykaz wszystkich identyfikatorów i odwołań lokalnych przed połączeniem plików. Po uruchomieniu dowolnego optymalizatora lub generatora powtórz tę inwentaryzację dla sprite’a w wersji udostępnianej użytkownikom. Zmiana nazwy tylko zewnętrznego symbolu nie rozwiązuje problemu powielonych identyfikatorów wewnętrznych.

Nazwij każdą widoczną instancję w jej kontekście

Liść obok widocznego słowa „Garden” („Ogród”) powtarza informację, którą przycisk już przekazuje. Jego SVG używa aria-hidden="true", pozostawiając tekstowi przycisku rolę źródła nazwy. Zachowaj ten atrybut na dekoracyjnym SVG, a nie na interaktywnym przycisku. Wskazówki MDN dotyczące aria-hidden obejmują treści dekoracyjne i ostrzegają przed ukrywaniem elementów, które mogą otrzymać fokus.

Samodzielna strzałka pełni inną rolę: przekazuje kierunek bez tekstu w pobliżu. Jej zewnętrzny element SVG używa role="img" i aria-label="Right direction", czyli etykiety „Kierunek w prawo”, zgodnie ze wskazówkami MDN dotyczącymi nazywania osadzonego obrazu SVG.

Ustal etykietę w miejscu użycia. Liść wielokrotnego użytku może w różnych interfejsach oznaczać „Ogród”, „Roślinne” lub pełnić wyłącznie funkcję dekoracyjną. Przetestuj nazwę dostępną końcowego komponentu za pomocą narzędzi przeglądarki do inspekcji dostępności oraz docelowej technologii asystującej; sam symbol wielokrotnego użytku nie określa tego kontekstu.

Sprawdź udostępniany sprite, a nie tylko pliki źródłowe

Sprawdziliśmy ten autorski przykład w przeglądarce, w środowisku testowym działającym w obrębie jednego originu. Liść został wyrenderowany w kolorze turkusowym i koralowym, szeroka strzałka zachowała swój kształt, a celowo brakujący fragment spowodował wyświetlenie pustego pola ikony. Drzewo dostępności przeglądarki udostępniło przycisk Garden i nazwaną strzałkę. To sprawdzenie tego konkretnego środowiska testowego, a nie certyfikacja zgodności z różnymi przeglądarkami lub czytnikami ekranu.

Po spakowaniu wykonaj ten sam niewielki zestaw kontroli:

1. Plik: potwierdź, że strona ładuje właściwy sprite z końcowego adresu URL.
2. Fragment: porównaj każdy fragment href z identyfikatorem symbolu w udostępnianym pliku, uwzględniając wielkość liter.
3. Granice: porównaj mały komponent i powiększoną grafikę pod kątem przycinania, odstępów od krawędzi i proporcji.
4. Kolorowanie: wyrenderuj jednokolorową ikonę w dwóch kolorach motywu i osobno sprawdź każdą grafikę ze stałymi kolorami.
5. Odwołania wewnętrzne: sprawdź, czy odwołania z prefiksami do definicji kolorowania, masek i przycinania nadal wskazują właściwe definicje po optymalizacji.
6. Znaczenie: sprawdź nazwę każdego interaktywnego komponentu oraz etykietę każdego samodzielnego obrazu przekazującego znaczenie.

Jeśli plik się ładuje, ale pojedyncza instancja jest pusta, sprawdź fragment przed zmianą geometrii. Jeśli ta sama grafika jest pusta również jako zwykły plik SVG, wykonaj szerszy zestaw kontroli pustego SVG. Jeśli po powiększeniu wygląda na rozpikselowaną, sprawdź, czy zawiera osadzony obraz rastrowy, zanim uznasz, że problem spowodował sprite.

Gdy jedynym źródłem jest ikona PNG

Jeśli prosta ikona zachowała się tylko jako PNG, przekonwertuj ten PNG na SVG za pomocą PerfectVector, zanim ją spakujesz. Porównaj wynikową sylwetkę, otwory i obszary kolorów ze źródłem, a następnie zaakceptuj granice jej układu współrzędnych i regułę kolorowania. Na koniec nadaj zaakceptowanej grafice stabilne identyfikatory i dodaj ją do sprite’a. Konwersja dostarcza grafikę wektorową; nie wybiera nazw symboli, semantyki komponentów ani architektury udostępniania.

Jeśli istnieje poprawny oryginalny plik SVG, użyj go. Ponowna wektoryzacja wprowadza kolejny etap odtwarzania kształtu, nie rozwiązując błędnego odwołania do fragmentu. Przejrzyj poradniki edycji i przygotowania SVG, gdy pozostały problem dotyczy grafiki, a nie sposobu jej spakowania.

FAQ

Dlaczego mój sprite SVG jest pusty, gdy otwieram go bezpośrednio? Sprite zawierający wyłącznie definicje symboli nie wyświetla tych symboli bezpośrednio. Przetestuj go przez instancję SVG używającą use, z poprawną ścieżką do pliku i identyfikatorem fragmentu, zanim uznasz pusty dokument za uszkodzoną grafikę.

Czy każdy symbol musi mieć taki sam viewBox? Nie. Podczas pakowania zachowaj każdy zaakceptowany układ współrzędnych. Ikony korzystające ze wspólnej siatki systemu projektowego mogą mieć takie same granice, ale szeroki symbol nie staje się kwadratową ikoną tylko przez zmianę liczb w jego viewBox.

Dlaczego zmiana koloru strony nie zmienia koloru mojej ikony? Sprawdź regułę kolorowania w źródle. Stałe wypełnienie różni się od ścieżki utworzonej z użyciem currentColor. Zachowaj zamierzoną grafikę wielokolorową i jawnie wybierz, które wypełnienia lub obrysy mają dziedziczyć kolor instancji.

Czy mogę umieścić sprite na innej domenie? Nie zakładaj, że zewnętrzne odwołanie use zadziała między różnymi originami. Zacznij od środowiska testowego działającego w obrębie jednego originu, a następnie przetestuj rzeczywisty host i docelowe przeglądarki przed zmianą sposobu udostępniania. Działający przykład lokalny nie potwierdza obsługi odwołań między różnymi originami.

Źródła

1. MDN — symbol — definicje wielokrotnego użytku i renderowanie pośrednie.
2. MDN — use — fragmenty zewnętrzne, ograniczenia stylowania i ograniczenia dotyczące originu.
3. MDN — viewBox — zależność między granicami układu współrzędnych a obszarem wyświetlania.
4. MDN — color — currentColor jako wartość wejściowa dla kolorowania SVG.
5. MDN — id — unikalność identyfikatorów w obrębie drzewa dokumentu.
6. MDN — fill — odwołania do definicji kolorowania, takie jak adresy URL gradientów.
7. MDN — aria-hidden — treści dekoracyjne i uwagi dotyczące elementów, które mogą otrzymać fokus.
8. MDN — img role — zewnętrzny element SVG z etykietą dla obrazu przekazującego znaczenie.

Zacznij od dwóch zaakceptowanych ikon i przetestuj ich nazwy, granice i kolory w rzeczywistym komponencie. Jeśli jedno ze źródeł istnieje wyłącznie jako odpowiedni obraz rastrowy, odtwórz jego ścieżki SVG, sprawdź grafikę, a następnie dodaj zaakceptowany wynik do swojego sprite’a.