SVG – grafika słowem malowana

Wyobraź sobie, że w swoim blogu czy w witrynie umieszczasz rysunek koła (mniejsza w tym miejscu, co miałby tam robić) – w programie graficznym nadajesz mu promień 50 pikseli, obramowanie w kolorze czerwonym, a wypełnienie w niebieskim. Pracowicie zapisujesz rysunek na dysku, eksportujesz do formatu JPG lub PNG i wstawiasz do dokumentu. Po jakimś czasie okazuje się, że koło musi mieć promień 100 pikseli, obramowanie niebieskie, a wypełnienie czerwone. Siadasz poirytowany do komputera i robisz nowy rysunek.

Narzędzie: SVG - Scalable Vector Graphics
Kategoria: grafika komputerowa
Temat: O grafice SVG
Poziom trudności: 2/3
Wielkość dokumentu: ok. 2200 znaków, 2 ilustracje

A wyobraźmy sobie inne rozwiązanie, które w wielu sytuacjach może się okazać znacznie prostsze i wygodniejsze, choć naturalnie nie jest wcale uniwersalne i do zastosowania w każdych okolicznościach. Rozwiązaniem tym jest grafika SVG.

Obraz w formacie SVG jest obrazem zbudowanym z poleceń zapisanych w postaci tekstu, analogicznych do języka HTML czy CSS - przeglądarka z wbudowanym interpreterem SVG czyta taki kod źródłowy i wyświetla odpowiedni obraz. Wszystkie główne przeglądarki wspierają naturalnie SVG. Przykładowy kod:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="150">
<circle cx="100" cy="80" r="50" stroke="red" stroke-width="3" fill="blue" />
</svg>

Kod ten wygeneruje koło z pierwszego przykładu.



Zmieniamy teraz szybko r=50 na r=100, stroke="red" na stroke="blue", a fill="blue" na fill="red" i uzyskujemy takie koło:



Jak widzimy, kilka drobnych zmian w kodzie koła zmieniło radykalnie jego postać. Za każdym razem, gdy będziemy chcieli zmienić promień, kolory wnętrza i obramowania, grubość obramowania czy położenie środka koła, możemy to zrobić błyskawicznie za pomocą drobnej manipulacji w kodzie źródłowym koła. Krótko mówiąc, to my podajemy rozkaz, a przeglądarka posłusznie maluje zgodny z nim obraz. Nietrudno się domyślić, że technika ta ma w sobie ogromny potencjał, a zwykły użytkownik może ją wykorzystać choćby w blogu, jeśli tylko nadarzy się taka okazja. To tylko krótki wstęp do SVG, na zachętę - w innych wpisach przedstawimy praktyczne techniki tworzenia takiej grafiki.