Pliki SVG coraz częściej można napotkać na stronach internetowych. Mają wiele zalet, które mogą okazać się lepszą alternatywą dla standardowych, rastrowych formatów. Dowiedz się jak i kiedy je wykorzystać.
Co to są pliki SVG
SVG (ang. Scalable Vector Grapics) to format dwuwymiarowych plików graficzny. Wyróżnia się on na tle najpopularniejszych JPEG i PNG, ponieważ nie jest oparty na pikselach. W najczęściej używanych formatach obraz jest zapisywany jako piksele wchodzące w jego skład. Jednak w SVG grafikę zapisuje się za pomocą wektorów. Przy wyświetleniu zostaje ona odtworzona z kształtów, niejako wyrysowanych w układzie współrzędnych zamiast z kolejnych rzędów pikseli. Kolejnym jego wyróżnieniem jest to jak zapisuje tekst. Ponieważ SVG oparty jest na kodzie XML tekst zawarty na grafice jest zapisywany jako tekst, a nie jako kształty, jak w plikach opartych na pikselach.
Powstanie plików SVG
Ten format stworzono w 1999 roku na prośbę World Wide Web Consortium, które szukało nowego, wektorowego formatu plików. Na te zapytanie przesłano 6 różnych rozwiązań, ale ostatecznie W3C opracowało własne. World Wide Web Consortium to międzynarodowa organizacja, opracowująca standardy na potrzeby World Wide Web (WWW), by sposób wyświetlania stron był spójny. SVG miało być formatem plików, który będzie lepiej dostosowany do potrzeb stron internetowych. Jednak po utworzeniu tego formatu nie był on rozpowszechniony w użyciu, ponieważ wyszukiwarki go nie wspierały. Aby można było go odczytać trzeba było zainstalować specjalną wtyczkę, co było niepraktyczne. Obecnie większość wyszukiwarek wspiera pliki SVG, więc od roku 2011 używa się go coraz częściej.
Jak utworzyć i edytować
Pliki SVG są oparte na kodzie XML, więc da się je otworzyć i edytować nawet w najprostszym notatniku. Oczywiście, nie zobaczymy w ten sposób samej grafiki, jedynie reprezentujący ją kod, zawierający nazwy kolorów, kształty itd. Można ją edytować w ten sposób, pisząc kod, jednak jest to trudne. Jedną z aplikacji, w których można edytować i tworzyć pliki SVG graficznie jest Inkscape. Jest to darmowe rozwiązanie, które można pobrać z oficjalnej strony.
Możliwe jest także zamienienie pliku opartego na pikselach na plik SVG. Są do tego liczne narzędzia dostępne online, lecz ich skuteczność jest różna. Zdecydowanie łatwiej znaleźć narzędzie robiące odwrotną konwersję.
Zalety plików SVG
- brak strat na rozdzielczości przy zmianie rozmiaru – największym plusem plików SVG jest właśnie brak strat w rozdzielczości. Dzięki temu, że format używa wektorów można zmieniać rozmiar, nie obawiając się o tak drastyczne zmiany w jakości obrazu jak w plikach rastrowych, które mają z góry określoną wielkość,
- lżejsze pliki – pliki SVG są z reguły lżejsze niż pliki oparte na pikselach, co ma znaczenie tworząc, na przykład, strony internetowe,
- tekst w kodzie – w plikach rastrowych tekst zapisywany jest jako kształty, w SVG jako tekst w kodzie. Jest to dobre rozwiązanie, ponieważ umożliwia odczytanie robotom tekstu, a więc i zawartości obrazka,
- animacje – z plików SVG można tworzyć animacje. Animowane logo, które zmienia się pod wpływem interakcji może znacząco polepszyć estetykę strony.
Wady SVG
- ograniczenie użyteczności – o ile grafiki takie jak, loga i proste ikony są lżejsze, gdy zapisze się je w formacie wektorowym, to nie jest to prawdziwe dla bardziej skomplikowanych zdjęć,
- przeglądarki – starsze wersje przeglądarek mogą nie obsługiwać plików w takim formacie.
Kiedy użyć plików w tym formacie?
Pliki w formacie wektorowym są idealne do logotypów, tabeli, wykresów, prostych grafik. Wszystko, co nie ma zbyt wiele skomplikowanych kształtów. Jest to bardzo przydatny format dla grafik, jak właśnie logotypy, które umieszczane są w różnych miejscach stron internetowych, maili, mediów społecznościowych, a więc potrzebne jest wiele wersji w różnych rozmiarach. Dzięki temu, że pliki SVG nie tracą, aż tak, jakości przy zmienianiu rozmiaru, nie trzeba posiadać kilku wersji tej samej grafiki.
Jak użyć plików SVG?
Pliki w tym formacie można załączyć jak wszystkie inne grafiki, o ile program obsługuje ten typ grafiki. Jeśli chcemy załączyć grafikę na stronę internetową to można zrobić to bezpośrednio w kodzie.
W HTML taki plik można potraktować jak obraz PNG, albo skopiować kod obrazu między znacznikami <svg></svg> i wkleić w sekcji „body”.
W WordPress jest trochę trudniej, ponieważ nie da się załączyć tego typu plików do biblioteki. By móc wyświetlić je na stronie można:
- zainstalować wtyczkę, która by to umożliwiała,
- zmodyfikować kod, dodając odpowiedni kod w function.php,
- albo wstawić zdjęcie poprzez wklejenie kodu grafiki w bloku „Własny HTML”.
Podsumowanie
Reasumując, pliki wektorowe mogą być bardzo użyteczne. Dzięki swoim mniejszym rozmiarom, ale przede wszystkim braku strat rozdzielczości przy zmianie rozmiaru użycie ich na stronie ułatwi stworzenie szaty graficznej.
