Niestandardowe ikony SVG w Shopify: przygotuj dopracowany znak marki

Niestandardową ikonę SVG możesz dodać do motywu Shopify na dwa praktyczne sposoby: przesłać plik jako zasób motywu i wyświetlić go za pomocą znacznika obrazu albo umieścić jego kod w fragmencie Liquid i wyrenderować ten fragment tam, gdzie ma się pojawić ikona. Pierwszy sposób jest prostszy w przypadku znaku o stałych kolorach. Drugi daje Ci bezpośrednią kontrolę nad ścieżkami i kolorem. To, jakie ustawienia pojawiają się w edytorze motywu, zależy od używanego motywu, więc przed zmianą kodu sprawdź jego istniejące bloki ikon.

Jeśli jedynym źródłem jest PNG, najpierw utwórz SVG oparty na ścieżkach. Sama zmiana nazwy pliku nie zamieni pikseli w kształty. Jeśli masz dopracowany oryginalny plik SVG, najlepiej go użyć; szczegółowe zdjęcie zwykle lepiej pozostawić jako obraz. Poniższe kroki prowadzą od przygotowania pliku małego piktogramu marki do podglądu motywu, bez zakładania konkretnego konta sprzedawcy ani wersji motywu.

Wybierz miejsce dla ikony

Motywy Shopify mają katalog assets na pliki i katalog snippets na fragmenty kodu Liquid wielokrotnego użytku. Shopify opisuje oba w dokumentacji architektury motywów, a w przewodniku po kodzie motywu zaleca sprawdzenie opcji edytora motywu przed edycją kodu. Motyw z polem na niestandardowy SVG może nie wymagać żadnego z dwóch opisanych poniżej sposobów wykorzystujących kod. Obecność takiego pola w jednym motywie nie oznacza, że ma je każdy motyw.

Dwa sposoby dodania

To rozróżnienie ma znaczenie, ponieważ CSS strony nie może uzyskać dostępu do wnętrza SVG wczytanego przez zwykły znacznik <img>. Ścieżki osadzone bezpośrednio mogą używać currentColor, który pobiera wartość z właściwości CSS color. Zobacz przewodnik MDN po SVG używanym jako obraz i wyjaśnienie currentColor. Więcej ogólnych przykładów działania w przeglądarce znajdziesz w artykule SVG osadzony bezpośrednio a znacznik obrazu.

Przygotuj SVG przed zmianą motywu

Zacznij od najmniejszej użytecznej wersji znaku marki. W przypadku ikony zachowaj jej sylwetkę i wszystkie celowe prześwity przy rozmiarze, w którym klienci rzeczywiście będą ją oglądać. Drobne liternictwo lub tekstura, które dobrze wyglądają na obszarze roboczym, mogą stać się nieczytelne przy rozmiarze od 20 do 32 pikseli. Zachowaj plik źródłowy marki jako plik główny; ikonę wyeksportuj osobno.

1. Odzyskaj dopracowane źródło. Wyeksportuj SVG z oryginalnego projektu wektorowego, jeśli taki istnieje. Jeśli jedynym źródłem jest płaski PNG, PerfectVector może pomóc na tym jednym etapie: utwórz wstępną wersję SVG, korzystając z procesu konwersji clipartu do SVG, a następnie otwórz pobrany plik w edytorze grafiki wektorowej. Porównaj sylwetkę i poszczególne kształty z plikiem PNG. Wynik wektoryzacji to punkt wyjścia, a nie gwarancja identycznej geometrii.
2. Sprawdź strukturę. Upewnij się, że widoczny znak składa się ze ścieżek lub podstawowych kształtów wektorowych, a nie z jednego prostokąta <image> z osadzonym obrazem rastrowym. Usuń przypadkowe prostokąty tła, zbędne fragmenty, zduplikowane kontury i drobne obszary koloru. Przewodnik po przygotowaniu ikon PNG opisuje spójne siatki i rozmiar optyczny ikon w zestawie.
3. Ustaw obszar i kolory. Nadaj eksportowanemu plikowi viewBox z rozsądnym marginesem. Zachowaj stałe kolory marki, jeśli znak musi pozostać dwukolorowy. Jeśli jednokolorowa ikona ma dziedziczyć kolor motywu, ustaw currentColor na odpowiednich ścieżkach. Artykuł Zmiana koloru SVG wyjaśnia, dlaczego wypełnienie zapisane na stałe może utrudniać późniejszą zmianę koloru.
4. Przejrzyj kod pliku. Zachowaj tylko elementy i atrybuty potrzebne do wyświetlenia ikony. Przed osadzeniem kodu bezpośrednio w motywie usuń nieoczekiwane skrypty, odwołania zewnętrzne, zbędne dane edytora i niezaufany kod. Otwórz oczyszczony SVG w rozmiarze ikony oraz w większym rozmiarze do kontroli; te dwa sprawdzenia pozwalają wychwycić różne błędy.

W przypadku małej, jednokolorowej gwiazdy kod źródłowy może być tak prosty jak poniżej. Poniższa ścieżka jest autorskim przykładem, a nie ikoną dostarczoną przez Shopify ani wynikiem konwersji w PerfectVector. Ma jawnie określony układ współrzędnych i nie zawiera osadzonego obrazu:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

Dwukolorowy znak marki potrzebuje osobnych ścieżek lub kształtów z celowo dobranymi wypełnieniami. Zastąpienie każdego koloru przez currentColor usunęłoby to rozróżnienie. Jeśli znak należy do większej rodziny ikon, zastosuj te same zasady rozmiaru i koloru do kilku reprezentatywnych ikon przed wyeksportowaniem pozostałych.

Sposób A: wyświetl zasób motywu

Filtr Shopify asset_url zwraca adres URL w CDN dla pliku z katalogu assets motywu. Dodaj tam sprawdzony SVG, a następnie odwołaj się do jego dokładnej nazwy pliku w odpowiednim szablonie, sekcji lub fragmencie Liquid. Poniższy prosty przykład zakłada, że brand-mark.svg jest dekoracyjnym znakiem o stałych kolorach umieszczonym obok widocznego tekstu:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Użyj opisowego tekstu alt, jeśli obraz przekazuje informacje, których nie zawiera sąsiadujący tekst. Dla obrazu wyłącznie dekoracyjnego odpowiednie jest alt="". Wytyczne Shopify dotyczące dostępności motywów zalecają stosowanie atrybutu alt dla każdego obrazu i pustej wartości dla ikon dekoracyjnych. Jawnie podane szerokość i wysokość rezerwują też miejsce podczas wczytywania zasobu, co wyjaśniają wytyczne Shopify dotyczące dostarczania zasobów.

Przy tym sposobie SVG pozostaje z punktu widzenia strony jednym obrazem. Jeśli kolor motywu się zmieni, zaktualizuj wypełnienia SVG lub wybierz sposób z bezpośrednim osadzeniem kodu, zamiast zakładać, że reguła CSS elementu nadrzędnego zmieni kolory pliku. Nie wklejaj adresu URL pliku z jednego sklepu do innego motywu; pozwól, aby asset_url ustalił adres zasobu motywu.

Sposób B: wyrenderuj fragment kodu z bezpośrednio osadzoną ikoną

W przypadku powtarzającej się jednokolorowej ikony umieść sprawdzony kod SVG w fragmencie takim jak snippets/brand-mark-icon.liquid. Dokumentacja fragmentów kodu Shopify używa {% render %} do wstawiania kodu wielokrotnego użytku. Minimalny fragment może pobierać kolor ze stylu otaczającego tekstu:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Następnie wyrenderuj go w odpowiednim pliku motywu:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Tutaj aria-hidden="true" służy do oznaczenia ikony, która jedynie dekoruje pobliski widoczny tekst. Jeśli sama ikona stanowi etykietę przycisku lub linku, nadaj temu elementowi sterującemu dostępną nazwę, zamiast polegać na dekoracyjnym SVG. Przetestuj go za pomocą klawiatury i czytnika ekranu. Ustawiaj jego kolor CSS i wymiary w standardowym systemie stylów motywu, zamiast rozrzucać jednorazowe wartości bezpośrednio w kodzie elementów.

Fragment kodu nadaje się do wielokrotnego użytku, ale nadal jest kodem motywu. Shopify zaleca zduplikowanie motywu przed zmianami kodu. Wprowadź zmianę w kopii, wyświetl podgląd konkretnej strony lub sekcji i zachowaj oryginalny fragment kodu, aby móc go porównać po aktualizacji motywu. Biblioteki ikon właściwe dla danego motywu mogą mieć własne argumenty i strukturę; sprawdź te pliki, zanim zastąpisz jakąkolwiek wbudowaną ikonę. Aktualna dyskusja w Shopify Community o bibliotece ikon pokazuje, dlaczego wyrenderowanie całej biblioteki niekoniecznie jest tym samym co wybranie z niej jednej ikony.

Sprawdź efekt w docelowym rozmiarze

Plik może być technicznie poprawny, a mimo to wyglądać źle w sklepie. Obejrzyj stronę na jasnym i ciemnym tle, jeśli motyw używa obu. Sprawdź znak w jego rzeczywistym rozmiarze CSS, przy wąskim obszarze widoku i obok sąsiednich ikon. Upewnij się, że prześwit pozostaje otwarty, kolory mają wystarczający kontrast, a ikona nie jest przycinana przez viewBox lub kontener.

Jeśli po powiększeniu zasób wygląda jak rozmyty prostokąt, sprawdź, czy zawiera osadzony obraz rastrowy. Jeśli ikona osadzona bezpośrednio ignoruje kolor motywu, poszukaj wypełnień zapisanych na stałe, stylów bezpośrednio w elementach lub selektora o większej specyficzności. Jeśli nic się nie pojawia, najpierw sprawdź nazwę pliku zasobu lub nazwę fragmentu kodu, a następnie kod sekcji w samym motywie. Nie zmieniaj kilku rzeczy naraz. Przewodnik po ikonach z maską CSS opisuje kolejny sposób, przydatny, gdy chcesz zmienić kolor sylwetki bez bezpośredniego osadzania jej ścieżek.

Jeśli Twój płaski piktogram jest dostępny tylko jako obraz rastrowy, utwórz wstępną wersję SVG za pomocą PerfectVector, a następnie sprawdź jej ścieżki, prześwity i kolory w docelowym rozmiarze ikony, zanim wybierzesz sposób dodania do motywu. Jeśli masz już dobry SVG, pomiń wektoryzację i przeznacz ten czas na podgląd sklepu.

FAQ

Czy mogę przesłać ikonę SVG przez ekran Customize w każdym motywie Shopify? Nie. Niektóre motywy udostępniają pole ikony lub niestandardowego SVG; inne wymagają dodania zasobu lub edycji kodu. Sprawdź sekcje i dokumentację konkretnego motywu, zanim założysz, że takie pole istnieje.

Dlaczego przesłany SVG nie przyjmuje koloru motywu? SVG używany przez znacznik obrazu jest zasobem graficznym, więc CSS strony nie nadaje stylów jego wewnętrznym ścieżkom. Edytuj wypełnienia SVG, jeśli ma być zasobem o stałych kolorach, albo użyj sprawdzonego kodu osadzonego bezpośrednio z currentColor, jeśli kolor ma zależeć od motywu.

Czy przed dodaniem ikony marki w formacie PNG należy przekonwertować ją do SVG? Przekonwertuj płaski piktogram, jeśli potrzebuje skalowalnych, edytowalnych ścieżek. Sprawdź wynik wektoryzacji w docelowym rozmiarze ikony i usuń zbędne kształty. Zachowaj zdjęcie lub obraz z teksturą w formacie rastrowym, jeśli wektoryzacja usunęłaby szczegóły, które nadają mu charakter.

Źródła

1. Shopify Developers — Theme architecture — Zasoby motywu, fragmenty kodu i właściwe miejsce na kod.
2. Shopify Developers — asset_url — Sposób ustalania adresu URL zasobu motywu użyty w przykładzie Liquid.
3. Shopify Developers — Snippets — Kod Liquid wielokrotnego użytku i znacznik render.
4. Shopify Help Center — Editing theme code — Podejście zakładające najpierw użycie edytora, duplikowanie motywu i zalecenia dotyczące ostrożnego wprowadzania zmian w kodzie.
5. Shopify Developers — Accessibility best practices — Tekst alternatywny i obsługa ikon dekoracyjnych.
6. Shopify Developers — Serve assets from Shopify CDN — Filtry zasobów i jawnie określone wymiary obrazów.
7. MDN — SVG as an image — Ograniczenia przeglądarki dotyczące SVG używanego jako obraz.
8. MDN — SVG color attribute — Jak currentColor określa kolory wypełnień i obrysów SVG.