SVG

SVG (Scalable Vector Graphics) to oparty na języku znaczników XML format grafiki wektorowej. Zamiast zapisywać obraz jako siatkę pikseli, SVG opisuje go matematycznie — za pomocą punktów, linii, krzywych i kształtów. Dzięki temu grafikę SVG można powiększać i pomniejszać do dowolnego rozmiaru bez utraty ostrości i bez wzrostu wagi pliku. Format jest otwartym standardem organizacji W3C i natywnie obsługiwanym przez wszystkie współczesne przeglądarki.

Na czym polega format SVG

Plik SVG jest w istocie dokumentem tekstowym zawierającym instrukcje rysowania. Ponieważ obraz jest opisany kodem, można go edytować w dowolnym edytorze tekstu, stylizować za pomocą CSS i animować skryptami JavaScript. To zasadnicza różnica względem grafiki rastrowej:

• Skalowalność — ta sama grafika wygląda ostro na małej ikonie i na dużym banerze;
• Mała waga — proste ilustracje i logo zajmują mniej niż odpowiedniki rastrowe;
• Edytowalność — kolory, kształty i tekst można zmieniać bezpośrednio w kodzie;
• Dostępność — obiekty SVG mogą zawierać opisy tekstowe czytane przez czytniki ekranu.

Ograniczeniem formatu są zdjęcia i złożone obrazy fotograficzne — te lepiej zapisywać w formatach rastrowych, takich jak JPEG, PNG czy WebP.

Zastosowanie w praktyce

SVG jest dziś standardem dla logo, ikon, wykresów i prostych ilustracji na stronach internetowych. Format sprawdza się w responsywnych interfejsach, bo jedna grafika obsługuje wszystkie rozdzielczości ekranów, w tym wyświetlacze o wysokiej gęstości pikseli. SVG wykorzystuje się także do interaktywnych map, animacji oraz jako element favicony.

Osadzając SVG bezpośrednio w kodzie HTML, unika się dodatkowych żądań do serwera, co przyspiesza ładowanie strony. Ponieważ jednak plik SVG może zawierać skrypty, wgrywanie takich plików od użytkowników zewnętrznych wymaga oczyszczania ich zawartości, aby zapobiec atakom XSS. Prawidłowo stosowany format łączy niską wagę, ostrość na każdym ekranie i pełną kontrolę nad wyglądem grafiki.