Grafika wektorowa to metoda przekazywania kształtów, współrzędnych i ścieżek do kontekstu renderowania. To zbiór instrukcji określających, jak narysować obraz. Po powiększeniu lub zmniejszeniu obrazu zestaw punktów i linii, które reprezentuje, jest ponownie skalowany. Gładka krzywa między dwoma punktami jest dodawana równie płynnie i bez względu na rozmiar – podobnie jak w przypadku przeskalowywania obramowań w elemencie HTML, który jest skalowany w widocznym obszarze.
Scalable Vector Graphics (SVG) to oparty na języku XML język znaczników opracowany przez organizację W3C. To format wektorowy obrazów przeznaczony na potrzeby współczesnego internetu.
Każde oprogramowanie do edycji grafiki wektorowej umożliwia wyeksportowanie obrazu jako pliku SVG. Ponieważ jednak jest to ustandaryzowany, zrozumiały dla człowieka język znaczników, plik SVG można też tworzyć i edytować za pomocą dowolnego oprogramowania do edycji tekstu – niezależnie od tego, jakiego oprogramowania użyto do jego utworzenia. Jednak szybko staje się to nierealistyczne w przypadku obrazów o prawdziwej złożoności. W pliku SVG można nadać styl CSS lub zawierać kod JavaScript, który tworzy określone zachowania i interakcje w samych obrazach.
Poza oczywistą atrakcją dla projektantów i programistów SVG jest to również niezwykle wydajny format, jeśli chodzi o wygodę użytkowników. Informacje opisowe w źródle SVG są często bardzo kompaktowe w porównaniu z bardziej restrykcyjnymi informacjami opartymi na siatce pikseli w formatach rastrowych, w przypadku prostych kształtów. Ma to na celu niewielkie uproszczenie różnicy między sygnalizowaniem przeglądarce „narysuj czerwoną linię między 1 x 1 a 1 x 5” oraz „1 x 1 to czerwony piksel”. 1 x 2 to czerwony piksel. 1 x 3 to czerwony piksel. 1 x 4 to czerwony piksel. 1 x 5 to czerwony piksel”. Z drugiej strony opisowy charakter SVG wymaga większej interpretacji – bardziej „myślenia” – od przeglądarki. Z tego powodu złożone pliki SVG mogą być bardziej obciążające podczas renderowania. Podobnie bardzo złożony obraz może oznaczać szczegółowy zestaw instrukcji i duży rozmiar transferu.
Natychmiastowe rozpoznanie proponowanego źródła obrazu jako obsługiwanego przez format SVG zamiast tradycyjnego formatu rastrowego może wymagać wykonania kilku prób i błędów. Należy jednak pamiętać o kilku wytycznych: elementy interfejsu, takie jak ikony, niemal zawsze są dobrze obsługiwane w formacie SVG. Obrazy w formacie SVG z wyrazistymi liniami, jednolitymi kolorami i wyraźnie określonymi kształtami zwykle dobrze nadają się do tego formatu.
SVG to ogromny temat – to cały język znaczników, który współistnieje z kodem HTML, zapewniający unikalne opcje i funkcje związane ze stylem. Bardziej szczegółowe informacje o SVG znajdziesz w samouczku SVG MDN.