Odsłony: 282
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.
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ę.