Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

06. Dlaczego SVG jest lepszy od JPEG, GIF i PNG

06. Dlaczego SVG jest lepszy od JPEG, GIF i PNG

Autor: Adam Stępień Opublikowano: 29 lipca 2011 Odsłon: 14 880

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

<!DOCTYPE html>
<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.

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ć.

Tekst ozdobny
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<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.

Zobacz również

Komentarze

Grafika rastrowa (jpg) i wektorowa (svg) to syn i córka. Który format lepszy? zależy od zastosowania. Spróbujcie pokazać np. fotografię krajobrazu za pomocą svg ;">. Tego nie da się porównać na zasadzie lepszy-gorszy. To trochę jak porównanie co jest lepsze: łódka czy samochód?. Zależy do czego.
Paweł, 8 sierpnia 2011, 11:19
po co ci taki "ozdobny" tekst (?), przecież to gniot, przypominający Internet z początku lat 90-tych... tak jak powiedział już mój poprzednik, pewnych rzeczy nie da się porównywać, na zasadzie lepszy-gorszy, ponieważ służą do różnych celów, ale jeśli już koniecznie musisz to robić, to "najlepszym" formatem jest zdecydowanie jpeg, bez którego trudno sobie dziś wyobrazić całą fotografię i korzystający z zasobów zdjęciowych Internet, natomiast bez egzotycznego svg(?) - jak najbardziej.
zig, 10 grudnia 2016, 20:12

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.