Formatowanie SVG

Formatowanie SVG to ustawienia kontrolujące wygląd grafiki wektorowej osadzonej w dokumencie.

Formatowanie SVG jako sposób opisu wyglądu grafiki

Formatowanie SVG obejmuje zestaw reguł, które określają, jak grafika wektorowa ma być wyświetlana w przeglądarce, edytorze grafiki albo aplikacji korzystającej z pliku SVG. Nie chodzi wyłącznie o wybór koloru. W praktyce uwzględnia się między innymi wypełnienie obiektów, obrys, grubość linii, przezroczystość, kolejność elementów, sposób łączenia ścieżek oraz reakcję grafiki na zmianę rozmiaru. Ponieważ SVG zapisuje kształty jako opis matematyczny, wygląd może być kontrolowany znacznie dokładniej niż w przypadku zwykłego obrazu rastrowego.

W dokumencie SVG formatowanie może być zapisane bezpośrednio przy konkretnym elemencie, w sekcji definiującej style albo w zewnętrznym arkuszu CSS. Ta elastyczność pozwala rozdzielić strukturę grafiki od jej wyglądu. Przykładowo jedna ścieżka może opisywać kontur ikony, a osobne reguły mogą określać jej kolor w stanie podstawowym, po najechaniu kursorem oraz po wybraniu elementu. Dzięki temu ten sam kształt można wykorzystać w kilku wariantach interfejsu bez tworzenia wielu niezależnych plików.

Warto odróżnić formatowanie SVG od samego rysowania. Rysowanie określa, z jakich elementów składa się grafika, natomiast formatowanie wskazuje, w jaki sposób te elementy mają wyglądać. Prostokąt, okrąg, wielokąt lub ścieżka pozostają tym samym obiektem, lecz za pomocą stylów mogą uzyskać inną barwę, obrys, poziom krycia albo sposób nakładania się na pozostałe obiekty.

Formatowanie SVG w zestawieniu z grafiką rastrową i CSS

Najważniejszą cechą SVG jest zachowanie ostrości przy powiększaniu. Obraz rastrowy składa się z pikseli, dlatego po znacznym zwiększeniu rozmiaru mogą pojawić się rozmycia i poszarpane krawędzie. SVG opisuje linie oraz krzywe, które są wyliczane ponownie przy każdym rozmiarze wyświetlania. Z tego powodu formatowanie SVG często stosuje się przy ikonach, znakach graficznych, prostych schematach, mapach, diagramach i elementach interfejsu.

Podobieństwo do CSS bywa źródłem nieporozumień. Część właściwości ma podobne nazwy i działanie, ale SVG posiada także reguły charakterystyczne dla grafiki wektorowej. Wypełnienie obiektu opisuje się właściwością fill, a jego obrys właściwością stroke. Grubość obrysu kontroluje stroke-width, sposób zakończenia linii określa stroke-linecap, a sposób łączenia segmentów stroke-linejoin. Przy skomplikowanych ilustracjach znaczenie mogą mieć także maski, wzory, gradienty oraz filtry.

Formatowanie zapisane w atrybutach elementu zwykle ma pierwszeństwo przed regułą z arkusza stylów, zależnie od sposobu osadzenia i szczegółowości selektora. Przy projektach rozwijanych przez dłuższy czas korzystne jest ograniczenie przypadkowego mieszania wielu metod. Czytelniejszy kod ułatwia zmianę kolorystyki, odnalezienie przyczyny nieprawidłowego wyglądu i kontrolę zachowania grafiki w różnych przeglądarkach. Pomaga również konsekwentne nazywanie klas, rozdzielenie elementów dekoracyjnych od funkcjonalnych oraz ograniczenie powielonych deklaracji.

Typowe problemy z formatowaniem SVG

Jednym z częstych problemów jest brak widocznego wypełnienia lub obrysu. Może to wynikać z ustawienia wartości none, nieprawidłowego dziedziczenia stylu albo użycia koloru o bardzo małym kontraście względem tła. Zdarza się też, że reguła CSS dotyczy niewłaściwego elementu. W rozbudowanym pliku kilka zagnieżdżonych grup może sprawiać wrażenie, że styl jest przypisany do obiektu, chociaż w rzeczywistości działa na jego rodzica albo na inny element o podobnej nazwie.

Inny problem wiąże się z przezroczystością. W SVG można kontrolować ją globalnie za pomocą opacity albo osobno dla wypełnienia i obrysu przez fill-opacity oraz stroke-opacity. Różnica jest istotna, gdy kontur ma pozostać wyraźny, a wnętrze obiektu ma być półprzezroczyste. Niewłaściwe połączenie tych właściwości może spowodować, że cała grupa stanie się zbyt blada.

Problemy z wyglądem pojawiają się również przy skalowaniu. Atrybut viewBox opisuje wewnętrzny układ współrzędnych grafiki, a atrybuty width i height wpływają na jej rozmiar na stronie. Jeśli proporcje tych wartości są niespójne, grafika może zostać rozciągnięta. Z kolei nieprawidłowo dobrany viewBox może ucinać fragment ilustracji albo pozostawiać zbyt duży pusty obszar. W przypadku ikon trzeba także sprawdzić, czy grubość obrysu zachowuje się zgodnie z oczekiwaniem po zmniejszeniu obrazu.

Warto zwrócić uwagę na kolejność elementów. W wielu przypadkach obiekty zapisane później są rysowane nad wcześniejszymi. Cień, kontur lub fragment tła może więc przesłonić właściwy kształt, mimo że każdy element ma poprawne właściwości. Przy filtrach i maskach dochodzą dodatkowe zależności, dlatego diagnozę najlepiej prowadzić stopniowo: najpierw sprawdzić sam kształt, następnie wypełnienie i obrys, a na końcu efekty specjalne.

Formatowanie SVG w praktycznej pracy z plikiem

Przed rozpoczęciem zmian warto wykonać kopię pliku i ustalić, czy SVG jest używany jako osobny obraz, czy został wstawiony bezpośrednio do kodu strony. W pierwszym przypadku część stylów może być ograniczona przez sposób osadzenia. W drugim można zwykle sterować elementami za pomocą CSS strony, reagować na zdarzenia użytkownika i tworzyć warianty zależne od rozmiaru ekranu.

Przydatne jest sprawdzenie kodu w prostym edytorze tekstu oraz w narzędziach deweloperskich przeglądarki. Należy szukać powtarzających się identyfikatorów, pustych deklaracji, niewłaściwych nazw klas oraz reguł nadpisujących wcześniejsze ustawienia. Dobrą praktyką jest stosowanie jednego, jasno określonego źródła stylu dla podobnych elementów. Jeżeli kilka ikon ma wyglądać tak samo, lepiej nadać im wspólną klasę niż kopiować długie zestawy atrybutów do każdego obiektu.

W przypadku grafiki używanej na jasnym i ciemnym tle należy przetestować oba warianty. Kolor, który dobrze wygląda w jednym miejscu, może stracić kontrast w innym. Podobnej kontroli wymagają stany interaktywne, takie jak wskazanie kursorem, fokus klawiatury oraz stan wyłączenia. Zbyt mała różnica między stanami utrudnia rozpoznanie aktualnego działania elementu, a zbyt intensywna zmiana może zaburzać spójność interfejsu.

Przy przygotowaniu SVG do publikacji można usunąć nieużywane definicje, komentarze i nadmiarowe dane edytora graficznego. Trzeba jednak zachować ostrożność, ponieważ automatyczne upraszczanie kodu może zmienić kolejność warstw, identyfikatory, maski albo sposób działania filtrów. Po każdej większej optymalizacji wskazane jest otwarcie pliku w kilku środowiskach i porównanie jego wyglądu z wersją wyjściową.

Kiedy sprawdzić formatowanie SVG w serwisie

Do konsultacji technicznej warto zgłosić się wtedy, gdy grafika SVG wyświetla się inaczej w różnych przeglądarkach, traci kolory po osadzeniu na stronie, nie zachowuje proporcji albo przestaje reagować na reguły CSS. Pomocne może być także sprawdzenie sytuacji, w której po zmianie rozmiaru pojawiają się nieostre krawędzie, obcięte elementy, nieprawidłowe warstwy lub niewidoczne fragmenty ilustracji. Takie objawy mogą wynikać zarówno z błędów w samym pliku, jak i z konfliktu między kodem grafiki a stylem dokumentu.

W Warszawskim Pogotowiu Komputerowym 24/7 można omówić problem z plikiem, środowiskiem systemowym albo aplikacją, w której grafika jest wykorzystywana. Przed przekazaniem zgłoszenia warto przygotować oryginalny plik SVG, zrzut ekranu przedstawiający nieprawidłowy wygląd oraz informację, gdzie grafika jest osadzona. Przydatne będzie również wskazanie, czy problem pojawia się po zmianie rozmiaru, po przeniesieniu pliku na inne urządzenie, czy dopiero po dodaniu arkusza stylów.

Samodzielne zmiany są bezpieczne, gdy dotyczą pojedynczego koloru lub prostej grubości obrysu i zachowana została kopia zapasowa. Jeżeli jednak plik zawiera wiele grup, masek, gradientów i filtrów, przypadkowa modyfikacja może wpłynąć na kilka elementów jednocześnie. W takiej sytuacji uporządkowane sprawdzenie struktury SVG, reguł formatowania i sposobu osadzenia pozwala szybciej ustalić przyczynę oraz przywrócić przewidywalny wygląd grafiki.