Jest wiele korzyści z używania formatu SVG do umieszczania grafiki na stronach internetowych. W tym artykule skupimy się na zaletach SVG i jego przewagach nad grafiką w formacie JPEG, GIF, PNG. Przedstawimy także mocne strony SVG, których brakuje we Flashu.
Przybliżanie bez utraty jakości obrazu
Cechę te omówiliśmy już w artykule o podstawach formatu SVG. W skrócie format SVG - jak sama nazwa Scalable Vector Graphics wskazuje - świetnie sprawdza się tam, gdzie ważniejsze są szczegóły niż cały obrazek. Już dziś znalazł on szerokie zastosowanie w mapach, wykresach, diagramach, prezentacjach. Kto wie, czy niedługo nie pojawi się trend przygotowywania logo firmy albo witryny właśnie w formacie SVG. Taki obrazek jest często umieszczany w wielu miejscach i jego zmiana rozmiaru nie będzie kłopotliwa, czego nie można powiedzieć o zwykłych JPEG-ach.
Zachęcamy do odwiedzenia strony Jazdy Próbnej IE, gdzie znajduje się dobry przykład praktycznego zastosowania formatu SVG. Układ okresowy pierwiastków chemicznych może być z powodzenie przybliżanyi oddalany za pomocą myszki. Nie ma utraty jakości tekstu, ani obrazu, włącznie z krzywymi.Możliwość oskryptowania
Grafiką SVG można dowolnie manipulować przy pomocy JavaScriptu. Wszystkie atrybuty - czy to kolor, czy pozycja - opisujące element mogą być zmienione. Przykładowe wykorzystanie skryptów i obsługi zdarzeń (tu: kliknięcia elementu i najechania myszką) przedstawiamy poniżej.
Kółko dynamicznie zmieniające kolor po kliknięciu
<head>
<title>Interakcja SVG</title> <script type="text/javascript">
var kolory = ["orange", "black", "yellow", "red", "blue", "fuchsia"];
var kolor = 0;
function zmienKolor() {
var kolko = document.getElementById("mojeKolko");
kolor = (kolor + 1) % kolory.length;
kolko .setAttribute("fill", kolory[kolor]);
kolko .setAttribute("stroke", kolory[kolor]);
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="150" width="150">
<circle onclick="zmienKolor();"
cx="75" cy="75" r="50"
fill="orange"
stroke="orange" stroke-opacity=".5" stroke-width="10"
id="mojeKolko"/>
</svg>
Interaktywna mapa
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<style type="text/css" media="screen">
path:hover {fill:yellow;}
</style>
</head>
<body>
<svg width="400" height="400">
<g transform="translate(0,-400)">
<path fill="blue" onmousedown="alert('To są Hawaje');"
d="m 233.08751,519.30948 1.93993,-3.55655 2.26326,-0.32332 0.32332,0.8083 -2.1016,3.07157 -2.42491,0 z m 10.18466,-3.71821 6.14313,2.58657 2.10159,-0.32332 1.61661,-3.87987 -0.64664,-3.39488 -4.2032,-0.48498 -4.04153,1.77827 -0.96996,3.71821 z m 30.71563,10.023 3.7182,5.49647 2.42492,-0.32332 1.13163,-0.48498 1.45495,1.29329 3.71821,-0.16166 0.96997,-1.45495 -2.90991,-1.77827 -1.93993,-3.71822 -2.1016,-3.55654 -5.8198,2.9099 -0.64664,1.77828 z m 20.20765,8.89137 1.29329,-1.93994 4.68817,0.96996 0.64665,-0.48498 6.14312,0.64664 -0.32332,1.2933 -2.58658,1.45494 -4.36485,-0.32332 -5.49648,-1.6166 z m 5.33482,5.17315 1.93994,3.87987 3.07155,-1.13163 0.32333,-1.61662 -1.61661,-2.10159 -3.71821,-0.32332 0,1.29329 z m 6.95143,-1.13163 2.26326,-2.9099 4.68817,2.42492 4.36485,1.13163 4.36486,2.74824 0,1.93993 -3.55654,1.77828 -4.84985,0.96996 -2.42491,-1.45495 -4.84984,-6.62811 z m 16.65111,15.51947 1.61661,-1.29328 3.39489,1.61662 7.59807,3.55654 3.39489,2.10159 1.6166,2.42492 1.93994,4.36485 4.04153,2.58658 -0.32332,1.2933 -3.87987,3.23322 -4.20319,1.45495 -1.45495,-0.64664 -3.07157,1.77826 -2.42491,3.23323 -2.26326,2.9099 -1.77828,-0.16166 -3.55654,-2.58658 -0.32332,-4.52651 0.64664,-2.42492 -1.61661,-5.65814 -2.1016,-1.77828 -0.16166,-2.58658 2.26326,-0.96996 2.1016,-3.07156 0.48498,-0.96997 -1.61661,-1.77828 -0.32332,-2.1016 z"
id="HI"
/>
<path fill="red" onmousedown="alert('I am Alaska');"
d="m 158.07671,453.67502 -0.32332,85.35713 1.6166,0.96996 3.07157,0.16166 1.45494,-1.13162 2.58658,0 0.16167,2.9099 6.95143,6.78977 0.48499,2.58658 3.39488,-1.93994 0.64665,-0.16166 0.32332,-3.07156 1.45494,-1.61661 1.13164,-0.16166 1.93993,-1.45496 3.07156,2.1016 0.64665,2.90991 1.93993,1.13162 1.13163,2.42492 3.87988,1.77827 3.39488,5.98147 2.74823,3.87986 2.26326,2.74825 1.45496,3.7182 5.01149,1.77828 5.17317,2.10159 0.96996,4.36486 0.48498,3.07156 -0.96996,3.39489 -1.77828,2.26325 -1.61661,-0.8083 -1.45495,-3.07157 -2.74824,-1.45494 -1.77827,-1.13164 -0.80831,0.80831 1.45495,2.74825 0.16166,3.7182 -1.13163,0.48498 -1.93993,-1.93993 -2.10159,-1.29329 0.48498,1.61661 1.29328,1.77828 -0.8083,0.8083 c 0,0 -0.8083,-0.32332 -1.29328,-0.96997 -0.485,-0.64664 -2.1016,-3.39488 -2.1016,-3.39488 l -0.96997,-2.26326 c 0,0 -0.32332,1.29329 -0.96997,0.96996 -0.64665,-0.32332 -1.29329,-1.45494 -1.29329,-1.45494 l 1.77827,-1.93994 -1.45495,-1.45495 0,-5.0115 -0.8083,0 -0.8083,3.39488 -1.13164,0.485 -0.96996,-3.71822 -0.64665,-3.71821 -0.80831,-0.48498 0.32333,5.65815 0,1.13162 -1.45496,-1.29328 -3.55654,-5.98147 -2.1016,-0.48498 -0.64664,-3.71821 -1.61
...
Pełnego kodu nie zamieszczamy ze względu na jego długość, ale można je podejrzeć w źródle następującej strony.
@STRONA@Możliwość stylowania
Przygotowując stronę internetową z różnymi kompozycjami wizualnymi, np. motyw zielony i czerwony, wykorzystuje się podpinanie innego arkusza stylów. CSS-em możemy stylować wiele rzeczy, ale nie grafikę w popularnych formatach. Co prawda można podmieniać grafikę na inną, ale wtedy będzie ona musiała być załadowana w całości od nowa. Dzięki zamieszczeniu - poprzez background-image albo list-style-image - grafiki w formacie SVG na stronie możemy całkowicie zmienić motyw włącznie z kolorystyką obrazków.
Na stronie twórców przeglądarki Internet Explorer można znaleźć ciekawy przykład, który unaocznia możliwość przepinania CSS-ów wraz ze zmianą grafiki w formacie SVG. U dołu strony znajdują się linki do odpowiednich stylów Pink stylesheet i Greenstylesheet. Zachęcamy do wypróbowania!
Tekst w grafice możliwy do wyszukania
Zamieszczając grafikę w popularnych formatach JPEG, GIF, PNG wstawiamy tak naprawdę obiekt, który nie reprezentuje nic oprócz przyjemnych wrażeń wizualnych. Tekstu, który dodaliśmy do takiego pliku, nie można ani wyszukać, ani zlokalizować inaczej, jak tylko wizualnie. Z SVG jest inaczej. Korzystając z opcji wyszukiwania tekstu na stronie, słowa zawarte w grafice SVG (np. hasło reklamowe banera) będą wyświetlać się w wynikach wyszukiwania.
To duży atut, który może stać się znaczący, jak tylko wyszukiwarki internetowe wezmą pod uwagę go do sporządzania wyników wyszukiwania. Dodając grafikę w SVG możemy usprawnić pozycjonowanie strony. Teraz ten element nie jest szczególnie istotny, kiedy Google ustala pozycje stron, ale w niedługim czasie może się to zmienić. Podobnie było do niedawna, gdy Google w ogóle nie indeksował animacji Flash, a z czasem zaczął rozpoznawać podstawowe elementy w animacjach.
Ozdabianie tekstu
Obecnie jeżeli chcemy umieścić wyszukany i wystylizowany tekst na stronie, nie możemy ograniczyć się do określenia właściwości w CSS-ie. Tam można co najwyżej ustalić kilka podstawowych własności, jak szerokość kroju, rozmiar, kolor. W SVG można używać wielu filtrów i przejść tonalnych. Ponadto tekstu może opływać inny element po określonym ścieżce, np. falować. Uzyskanie podobnego efektu możliwe byłoby wyłącznie przy pomocy programów graficznych i funkcji eksportowania grafiki. A zatem nie byłby to już tekst, a obrazek, którego nie można nawet zaznaczyć.
<defs>
<linearGradient id="przejscieTonalne"
x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#FF00FF"/>
<stop offset=".7" stop-color="#FFCC00"/>
<stop offset="1" stop-color="#FFFF66"/>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="500">
<text x="25" y="48"
fill="url(#przejscieTonalne)"
stroke="black"
font-family="Tahoma"
font-weight="bold"
font-size="36"
text-decoration="underline">
Tekst ozdobny</text>
</svg>
Automatyczne generowanie grafiki
Format SVG to tak naprawdę XML, którego tworzenie można zautomatyzować po stronie klienta, a przede wszystkim serwera. Podobne zachowanie od dawna można zauważyć, spoglądając na RSS-y. Pomyślmy, jakie ułatwione zadanie będzie przed kimś, kto chce np. stworzyć mapę, która będzie uaktualniana na bieżąco o lokalizacje użytkowników, których z czasem będzie coraz więcej, nowi odwiedzający. Można napisać aplikację, która będzie generowała plik SVG w oparciu o zaciągane z bazy informacje o lokalizacji użytkownika. Po podaniu w profilu miejsca zamieszkania będzie się generowała mapa z otoczeniem i innymi użytkownikami, którzy są w pobliżu z zaznaczeniem ich pozycji.
341f31d.png)