SVG inline a img: wybierz, jak ma zachowywać się Twoja grafika

Użyj SVG w elemencie <img>, gdy chcesz wyświetlić gotową grafikę. Umieść SVG bezpośrednio w kodzie strony, gdy strona ma zmieniać poszczególne kształty za pomocą CSS lub JavaScript. Oba sposoby pozwalają wyświetlać tę samą grafikę wektorową w różnych rozmiarach; umieszczenie jej inline nie poprawia jej geometrii.

To rozróżnienie ma znaczenie, gdy logo wygląda poprawnie w karcie przeglądarki, ale ignoruje regułę koloru w Twojej witrynie. Plik może być poprawny. Reguła może po prostu nie mieć dostępu do jego zawartości. Poniżej ta sama ilustracja gór występuje w obu formach, dzięki czemu możesz sprawdzić różnicę, zanim zmienisz sposób przygotowywania i dostarczania zasobów.

Wybierz potrzebne zachowanie

Zewnętrzny SVG pozostaje plikiem wektorowym, gdy wyświetlasz go przez <img>. Granica przebiega między stroną a wewnętrznymi elementami pliku. CSS strony może zmieniać rozmiar elementu obrazu, obracać go lub zmniejszać jego nieprzezroczystość, ale selektor taki jak .logo path nie może dotrzeć do ścieżek wewnątrz zasobu wskazanego przez src. Kształty inline stają się częścią drzewa dokumentu strony. Poradnik MDN dotyczący osadzania SVG opisuje te dwa sposoby.

Jeśli nadal sprawdzasz zawartość pliku, zacznij od artykułu o tym, czym jest plik SVG. Samo rozszerzenie .svg nie oznacza, że każdy widoczny szczegół jest ścieżką. Gdy przygotowujesz grafikę do wdrożenia w sklepie, po zweryfikowaniu zawartości pliku skorzystaj z poradnika dotyczącego niestandardowych ikon SVG w Shopify.

Przetestuj tę samą grafikę w obu formach

Na potrzeby tej demonstracji ręcznie napisaliśmy kod dwóch ścieżek przedstawiających góry i jednego koła przedstawiającego słońce. Wczytaliśmy tę grafikę z osobnego pliku i wkleiliśmy te same kształty do HTML. To test osadzania, a nie wynik konwersji w PerfectVector.

W naszym teście w przeglądarce Chromium obie wersje początkowo zajmowały 360 × 240 pikseli CSS i przedstawiały bursztynowe słońce. Następnie włączyliśmy regułę strony skierowaną do .sun. Słońce inline zmieniło kolor na koralowy; słońce w zewnętrznym obrazie pozostało bursztynowe. Zmniejszenie obu pól do 180 × 120 zmieniło rozmiar wyświetlania, nie zmieniając tej różnicy.

1. Zapisz osobny plik SVG

Utwórz artwork.svg z tym kompletnym kodem źródłowym. viewBox określa przestrzeń współrzędnych rysunku. Szerokość i wysokość nadają mu jawnie określone wymiary początkowe.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Dodaj obraz i kopię inline

Zapisz poniższy kod jako index.html obok artwork.svg, a następnie otwórz go w przeglądarce. Obie grafiki mają tę samą geometrię i atrybuty określające sposób kolorowania. Wersja inline ma również nazwę dla technologii wspomagających.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

Na zrzucie ekranu te same kształty są umieszczone w układzie porównawczym z dodatkowymi stylami. Krótszy przykład powyżej ułatwia odtworzenie tego zachowania.

3. Zmieniaj jedną zmienną naraz

Usuń class="theme" z elementu body i odśwież stronę. Oba słońca powinny teraz być bursztynowe. Przywróć klasę, a tylko słońce inline powinno zmienić kolor na koralowy. Zmień w .artwork wartość width: 360px na width: 180px; jeśli w kontenerze jest wystarczająco dużo miejsca, obie grafiki powinny zmniejszyć się do 180 × 120.

Jeśli chcesz trwale zmienić kolor słońca w zewnętrznym obrazie, edytuj jego fill w artwork.svg. Jeśli ma reagować na stan strony, wybierz kod inline lub inną świadomie dobraną metodę dostarczania. Nasz poradnik dotyczący zmiany kolorów SVG opisuje edycję samego pliku.

Nazwa .sun została dodana na potrzeby tego przykładu. Plik po konwersji lub eksporcie nie musi zawierać przydatnej klasy dla każdej istotnej części. Sprawdź i nazwij kształty, którymi zamierzasz sterować, zamiast zakładać, że widoczny obiekt jest jedną ścieżką, którą można wybrać selektorem.

Jawnie określ rozmiary i nazwy dla technologii wspomagających

Zachowaj viewBox, gdy przenosisz grafikę do HTML. Ustaw atrybuty szerokości i wysokości jako rozsądny punkt wyjścia, a następnie zastosuj responsywny CSS. W przypadku tej ilustracji o proporcjach 3:2 zapis width: 180px; height: auto zachowuje jej proporcje. Duży pusty margines wewnątrz viewBox pozostaje częścią obszaru rysunku w obu metodach; zmiana sposobu osadzenia nie może go usunąć.

Gdy pole w układzie ma inne proporcje, poradnik dopasowania z preserveAspectRatio porównuje dopasowanie całej grafiki, przycinanie i zniekształcanie.

W przypadku zewnętrznego obrazu przekazującego istotną treść zapisz alt w elemencie HTML <img>. W przypadku obrazu inline przekazującego istotną treść przykład używa role="img" i aria-labelledby wskazującego na jego <title>. SVG inline nie korzysta z atrybutu alt obrazu HTML. Te sposoby nadawania nazw opisano w poradniku MDN dotyczącym SVG w HTML.

Jeśli powielasz przykład inline, nadaj każdemu identyfikatorowi tytułu unikalną wartość i zaktualizuj odpowiadające mu aria-labelledby. Ta sama zasada dotyczy identyfikatorów używanych przez gradienty, maski lub ścieżki przycinania. W przypadku dekoracyjnej grafiki obok widocznego tekstu przekazującego tę samą treść użyj pustego alt w <img> albo ukryj SVG inline przed technologiami wspomagającymi za pomocą aria-hidden="true". Przetestuj cały link lub przycisk w jego otoczeniu, aby upewnić się, że jego nazwa nadal określa przeznaczenie.

W przypadku wielu ikon przeznaczonych do ponownego użycia sprite symboli SVG wprowadza osobne podejście oparte na definicjach i instancjach. Zdecyduj, czy potrzebujesz takiego ponownego użycia, zanim wkleisz duży zestaw kopii na każdą stronę.

Oceniaj wydajność na podstawie pomiarów

Kod inline umieszcza kształty w dokumencie zamiast pobierać tę grafikę jako osobny zasób obrazu. Zwiększa też ilość kodu dokumentu. Zewnętrzny plik może zostać ponownie użyty z pamięci podręcznej przeglądarki, zależnie od jego adresu URL, nagłówków odpowiedzi i stanu pamięci podręcznej. Poradnik MDN dotyczący buforowania HTTP wyjaśnia te warunki.

Żaden z tych faktów nie rozstrzyga, która wersja przyspieszy Twoją stronę. Porównaj rzeczywistą stronę podczas pierwszej i kolejnej wizyty, z faktyczną liczbą kopii i rzeczywistą złożonością SVG. Ta demonstracja sprawdza dostęp do właściwości kolorowania i zmianę rozmiaru; nie jest testem porównawczym szybkości ładowania.

Tryb zewnętrznego obrazu ma też ograniczenia wykraczające poza CSS. Dokumentacja MDN wyjaśnia, że w SVG używanym jako obraz JavaScript jest wyłączony, a korzystanie z zasobów zewnętrznych ograniczone. Nie przenoś nieznanego SVG do kodu inline tylko po to, by uruchomić niedziałającą funkcję. Sprawdź niezaufany kod i usuń z niego niebezpieczne elementy, zanim włączysz go do strony.

Gdy Twoja grafika źródłowa to tylko PNG

Jeśli źródło nie zawiera potrzebnych kształtów, wektoryzację należy przeprowadzić przed wyborem sposobu osadzenia. W przypadku odpowiedniego rastrowego logo lub ilustracji przekonwertuj PNG na SVG za pomocą PerfectVector, porównaj wynik ze źródłem i zachowaj zaakceptowany SVG jako plik wzorcowy grafiki. Sprawdź sylwetkę, otwory i małe obszary koloru, zanim dodasz klasy lub przygotujesz kopię do wykorzystania w witrynie.

PerfectVector dostarcza grafikę wektorową. Nadal to Ty wybierasz, które części mają reagować na CSS, dodajesz znaczące nazwy i testujesz końcową stronę. Konwersja obrazu nie tworzy automatycznie komponentu z semantycznymi nazwami klas. Jeśli istniejący SVG zawiera już użyteczne ścieżki, pracuj z nimi, zamiast odrysowywać wyrenderowaną kopię.

Sprawdź również, czy nie jest to SVG zawierający osadzony obraz rastrowy. Wklejenie takiego pliku inline udostępnia jego element <image>; nie zamienia pikseli wewnątrz tego elementu w kształty, których kolory można zmieniać osobno. W przypadku fotografii, która ma zachować fotograficzny charakter, pozostań przy odpowiednim formacie rastrowym do jej dostarczania.

Sprawdź końcową stronę

• Upewnij się, że samodzielna grafika wygląda poprawnie, zanim przetestujesz CSS strony.
• Wybierz <img> do wyświetlania gotowej grafiki lub SVG inline do bezpośredniego sterowania jej elementami.
• Sprawdź wyrenderowany rozmiar i proporcje w najwęższym obsługiwanym układzie.
• Przetestuj dokładnie ten kształt, którego kolor zamierzasz zmienić; nie polegaj na ogólnej regule path.
• Sprawdź nazwy obrazów, powtarzające się identyfikatory oraz otaczający je link lub przycisk.
• Zmierz zachowanie podczas ładowania, jeśli wpływa ono na decyzję; nie wyciągaj wniosków o szybkości z tego przykładu.

Najczęściej zadawane pytania

Czy SVG staje się bitmapą, gdy używam znacznika img? Nie. SVG wczytany przez img nadal może renderować geometrię wektorową. Element obrazu uniemożliwia stronie, na której jest osadzony, bezpośrednie wybieranie jego wewnętrznych kształtów; nie przekształca tych kształtów w PNG.

Dlaczego currentColor nie przyjmuje koloru tekstu mojej strony? Zewnętrzny obraz SVG ma własny kontekst stylów. Kolor strony nie staje się automatycznie wartością currentColor używaną wewnątrz tego pliku. Użyj SVG inline, gdy jego kolory mają być dziedziczone ze strony, i ustaw odpowiednie wypełnienie lub obrys tak, aby korzystały z currentColor.

Czy trzeba przekonwertować istniejący SVG przed umieszczeniem go inline? Konwersja nie jest potrzebna, jeśli plik zawiera już kształty wektorowe, których potrzebujesz. Sprawdź jego kod, zachowaj wymagane odwołania, dodaj odpowiednie nazwy i przetestuj go na stronie. Konwersja obrazu rastrowego na grafikę wektorową ma zastosowanie tylko wtedy, gdy potrzebujesz odzyskać kształty ze źródła rastrowego.

Źródła

1. MDN — Including vector graphics in HTML — Zachowanie zewnętrznego obrazu i osadzania inline.
2. MDN — SVG in HTML introduction — Kod inline, viewBox i nadawanie nazw dostępnych dla technologii wspomagających.
3. MDN — HTTP caching — Ponowne użycie z pamięci podręcznej zależy od zasad określonych w odpowiedzi i tożsamości zasobu.
4. MDN — SVG as an image — Ograniczenia skryptów i zasobów przy użyciu SVG jako obrazu.

Wybierz sposób osadzenia odpowiadający zadaniu grafiki, a następnie przetestuj go z rzeczywistymi stylami strony. Jeśli Twoim jedynym źródłem jest odpowiedni PNG, najpierw odzyskaj jego kształty wektorowe, sprawdź wynik i przygotuj zaakceptowaną grafikę do osadzenia w wybrany sposób.