SVG

SVG to wektorowy format grafiki skalowalnej bez utraty jakości niezależnie od rozmiaru wyświetlania.

SVG w kontekście grafiki komputerowej

SVG, czyli Scalable Vector Graphics, jest tekstowym formatem opartym na XML. Obraz nie jest przechowywany jako siatka pojedynczych pikseli, lecz jako opis obiektów geometrycznych, takich jak linie, krzywe, prostokąty, elipsy, wielokąty oraz ścieżki. Przeglądarka lub inny program odczytuje ten opis i dopiero podczas wyświetlania oblicza wygląd grafiki na ekranie. Dzięki temu ten sam plik może być użyty jako mała ikona, element interfejsu albo ilustracja zajmująca dużą część strony.

W pliku SVG znajdują się elementy opisujące kształty, ich położenie, wypełnienie, obrys, przezroczystość i sposób transformacji. Atrybuty takie jak viewBox określają układ współrzędnych używany wewnątrz rysunku, natomiast rozmiar wyświetlania może być ustalany niezależnie przez HTML lub CSS. Pozwala to dopasować grafikę do szerokości okna, gęstości ekranu i układu strony bez przygotowywania osobnej bitmapy dla każdego rozmiaru.

SVG może być osadzony bezpośrednio w kodzie HTML, dołączony jako osobny plik albo użyty jako tło w CSS. Wariant osadzony w dokumencie jest częścią drzewa DOM, dlatego jego elementy mogą reagować na style, zdarzenia myszy i skrypty. Osobny plik pozostaje łatwiejszy do współdzielenia między stronami i może być pobierany z pamięci podręcznej przeglądarki. Sposób osadzenia wpływa na możliwość modyfikowania elementów, dziedziczenie stylów oraz dostęp do treści alternatywnej.

Format korzysta z geometrii wektorowej, ale nie oznacza to, że każda zawartość SVG jest wektorowa. Dokument może zawierać także osadzone obrazy rastrowe, tekst, filtry i maski. Złożone filtry, rozmycia, cienie oraz duża liczba obiektów zwiększają koszt renderowania, szczególnie przy animacji lub częstym przeliczaniu układu. W praktyce szybkość zależy więc nie tylko od rozszerzenia pliku, lecz także od struktury dokumentu i możliwości urządzenia.

Budowa, zastosowania i porównanie z bitmapą

Najprostsze grafiki SVG składają się z kilku podstawowych figur i atrybutów opisujących ich wygląd. Bardziej szczegółowe ilustracje wykorzystują ścieżki zapisujące odcinki oraz krzywe, a także grupy pozwalające wspólnie przesuwać, obracać lub stylować wiele elementów. Transformacje są wykonywane matematycznie, więc można zmienić skalę obiektu bez ręcznego przeliczania każdego punktu. W projektach interfejsów często stosuje się symbole i znaczniki wielokrotnego użycia, co ogranicza powielanie identycznych fragmentów dokumentu.

W odróżnieniu od PNG lub JPEG plik SVG nie przechowuje finalnego koloru każdego punktu obrazu. PNG dobrze sprawdza się przy zrzutach ekranu, fotografiach z przezroczystością i obrazach zawierających drobne szczegóły rastrowe. JPEG jest zwykle używany dla fotografii, ponieważ kompresuje je kosztem części informacji. SVG lepiej pasuje do znaków graficznych, ikon, schematów, wykresów, map oraz prostych ilustracji, w których ważne są ostre krawędzie i możliwość zmiany rozmiaru.

Tekst w SVG może pozostać tekstem, ale jego wygląd zależy od dostępności odpowiednich krojów pisma i od sposobu przygotowania dokumentu. Zamiana liter na krzywe usuwa problem braku fontu, lecz zwiększa liczbę obiektów i utrudnia późniejszą edycję oraz wyszukiwanie treści. Przy publikowaniu grafiki warto zachować właściwe proporcje, opisać znaczenie ilustracji i sprawdzić kontrast. Sama skalowalność nie zapewnia automatycznie dobrej czytelności ani poprawnej obsługi przez technologie wspomagające.

SVG może zawierać animacje realizowane przez CSS lub JavaScript. Interaktywne elementy są przydatne na mapach, diagramach i wykresach, ale wymagają kontroli zakresu zmian oraz testów na różnych przeglądarkach. Pliki pochodzące z nieznanego źródła należy traktować ostrożnie, zwłaszcza gdy są osadzane bezpośrednio w stronie i mogą zawierać skrypty, odwołania zewnętrzne albo nietypowe filtry. Oczyszczenie dokumentu z niepotrzebnych danych zmniejsza rozmiar pliku i ogranicza niepożądane zachowania.

Co może pójść nie tak podczas wyświetlania

Jednym z częstych problemów jest nieprawidłowy układ współrzędnych. Błędnie dobrany viewBox, brak zachowania proporcji albo dodatkowe reguły CSS mogą powodować obcięcie grafiki, rozciągnięcie jej w jednym kierunku lub pojawienie się dużych pustych marginesów. Czasami obraz jest poprawny w edytorze graficznym, lecz wygląda inaczej po osadzeniu na stronie, ponieważ kontener narzuca własną szerokość, wysokość lub sposób dopasowania.

Grafika może również nie wyświetlać się wcale, gdy plik zawiera uszkodzony XML, niezamknięty element, nieprawidłową deklarację przestrzeni nazw albo odwołanie do zasobu znajdującego się pod niedostępną ścieżką. Problemem bywa też zapis pliku w nieodpowiednim kodowaniu, szczególnie gdy tekst zawiera znaki diakrytyczne. Narzędzia deweloperskie przeglądarki zwykle pokazują błędy parsowania, ale sam komunikat nie zawsze wskazuje, który element został wcześniej źle przygotowany.

Rozmycie krawędzi nie zawsze oznacza wadę formatu. Cienka linia może wypaść pomiędzy pikselami ekranu, a przeglądarka zastosuje wtedy częściową przezroczystość sąsiednich pikseli. Podobny efekt pojawia się przy skalowaniu niecałkowitym, filtrach i transformacjach. Przy ikonach o małych wymiarach pomocne może być dopasowanie geometrii do siatki pikseli, zwiększenie grubości obrysu albo przygotowanie osobnej wersji przeznaczonej do konkretnego zastosowania.

Niektóre objawy są związane z przeciążeniem renderowania. Dużo ścieżek, rozbudowane filtry i animacje mogą powodować opóźnienia przewijania, wysokie zużycie procesora lub płynność zależną od sterownika grafiki. Jeśli artefakty pojawiają się nie tylko w jednej grafice SVG, lecz także w filmach, zdjęciach i innych aplikacjach, warto rozważyć problem z ekranem, przewodem matrycy, układem graficznym albo sterownikiem. Sam plik należy wtedy odróżnić od usterki sprzętowej.

Diagnoza na komputerze i zakres pomocy technicznej

Przed zgłoszeniem problemu warto sprawdzić ten sam plik w więcej niż jednej aktualnej przeglądarce oraz otworzyć go lokalnie, jeżeli nie zawiera zasobów pobieranych z internetu. Należy porównać wygląd na innym ekranie, wyłączyć rozszerzenia przeglądarki i sprawdzić, czy problem dotyczy pojedynczej grafiki, całej strony czy wszystkich aplikacji. Przydatne jest również zachowanie oryginalnego pliku, wersji po eksporcie oraz informacji, w którym programie grafika została utworzona.

Jeżeli SVG wygląda prawidłowo na innym komputerze, a na konkretnym laptopie występują migotanie, kolorowe pasy, chwilowe zaniki obrazu lub artefakty także poza przeglądarką, diagnostyka powinna objąć ekran, połączenie matrycy, układ graficzny, pamięć operacyjną i zasilanie. W przypadku problemu ograniczonego do jednej witryny większe znaczenie mają kod strony, arkusze stylów, pamięć podręczna i sposób dostarczenia pliku.

Warszawskie Pogotowie Komputerowe wykonuje usługi naprawy i diagnostyki laptopów, komputerów stacjonarnych i elementów elektronicznych. Do serwisu warto zgłosić urządzenie wtedy, gdy nieprawidłowe wyświetlanie SVG jest częścią szerszych objawów sprzętowych albo gdy komputer wymaga sprawdzenia podzespołów i podstawowego odzysku danych z uszkodzonego nośnika.

Przekazując sprzęt do diagnozy, dobrze opisać moment wystąpienia problemu, używaną przeglądarkę, sposób podłączenia ekranu oraz to, czy artefakty pojawiają się przed uruchomieniem systemu. Taka informacja pomaga rozdzielić błąd pliku lub aplikacji od usterki laptopa i ogranicza wymianę sprawnych części na podstawie samego objawu.