Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.
SVG to nieoceniony format grafiki wektorowej opracowany przez World Wide Web Consortium (W3C), a do tego powszechnie obsługiwany przez przeglądarki internetowe. Oznacza to, że w przeciwieństwie do drukarskich formatów wektorowych (EPS, AI, czy DXF) da się używać SVG w tworzeniu stron internetowych, publikując wszelkiej maści ikony, logotypy, wykresy, czy interaktywne mapy.
Nie wszyscy wiedzą, że SVG jako format oparty na XML daje się implementować bezpośrednio w kodzie strony internetowej. Co więcej, ma ciekawą właściwość – implementowania animacji.
Załóżmy, że mam wyrysowany w Illustratorze projekt logo, na który składa się stylizowana litera „m” oraz czerwony okrąg znajdujący się przy prawej dolnej „nodze” litery. Wygląda to mniej więcej tak:
Kod źródłowy takiego pliku mógłby wyglądać np. tak:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="510.24px" height="368.5px" viewBox="0 0 510.24 368.5" enable-background="new 0 0 510.24 368.5" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M398.329,237.79c15.771-9.608,34.12-15.185,53.573-15.185c18.998,0,36.94,5.332,52.462,14.537v-82.895 c0-84.688-68.063-153.451-151.889-153.451h-2.861c-37.974,0-72.362,13.752-98.871,36.915 C224.235,14.55,189.847,0.798,151.875,0.798C68.051,0.798-0.012,69.561-0.012,154.249v160.69c0,29.676,23.643,53.562,53.018,53.562 c29.374,0,53.016-23.886,53.016-53.562v-160.69c0-26.058,20.778-47.048,46.57-47.048s46.568,20.99,46.568,47.048v160.69 c0,29.676,23.642,53.562,53.015,53.562c29.377,0,53.019-23.886,53.019-53.562v-160.69c0-26.058,20.777-47.048,46.568-47.048 s46.567,20.99,46.567,47.048L398.329,237.79L398.329,237.79z" />
<circle fill="#A5121D" cx="455.506" cy="300.859" r="48.859"></circle>
</g>
</svg>
Wytłumaczę o co tu chodzi:
Na wstępie zostały zadeklarowane: wersja XML i kodowanie znaków. W tym miejscu, w komentarzu przedstawił się również program generujący grafikę (Adobe Illustrator 14.0.0).
W tagu <svg> pojawiła się definicja DTD opisująca typ pliku jako SVG w wersji 1.1., znalazły się tam również dane definiujące obszar grafiki (width, height) oraz – co ważne – dane viewportu w postaci układu współrzędnych.
W dalszych wierszach: tag <g> spina wszystkie obiekty w jeden kontener, żeby było łatwiej nimi zarządzać. Z kolei w tagu <path> znajdują się już informacje odpowiadające za kształt wyrysowanego obrazu (włącznie z kolorem, szerokością obrysu, itp.).
Za wyświetlenie czerwonego koła odpowiada tag <circle>, w którym określono kolory, promień (wielkość) koła i tym podobne parametry.
Taka grafika może być już bez problemu umieszczona na stronie internetowej. Tyle, że ja wymyśliłem sobie, że czerwone koło będzie generowało fale odbicia, tak jak to jest czasem widoczne w transmisjach live. Postanowiłem więc zaanimować ten element.
W tym celu do istniejącego już koła dodałem dwa kolejne, które będą tworzyć zakładany efekt:
<circle cx="452" cy="310" r="63" fill="none" stroke="#a5121d" stroke-width="10">
<animate attributeName="r" from="63" to="80" dur="2.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0; 0.4; 0" keyTimes="0; 0.5; 1" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="452" cy="310" r="63" fill="none" stroke="#a5121d" stroke-width="10">
<animate attributeName="r" from="30" to="70" dur="2.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0; 0.4; 0" keyTimes="0; 0.5; 1" dur="2.5s" repeatCount="indefinite" />
</circle>
W tym przypadku nie chcę, żeby dwa nowe okręgi miały wypełnienie – dlatego mają atrybut fill=”none”. Zamiast wypełnienia ustawiłem atrybuty „stroke” i „stroke-width”, które będą tworzyć efekt rozchodzących się fal.
A teraz o animacji: tutaj bawię się przezroczystością elementów (attributeName=”opacity”). Zdefiniowałem jej kolejne wartości zaczynając od zera (niewidoczoność), poprzez 0.4, aż ponownie do niewidoczności (values=”0; 0.4; 0″). Opisałem też punkty czasowe tego działania (keyTimes=”0; 0.5; 1″) oraz określiłem czas jego trwania na 2.5 sekundy (dur=”2.5s”). Ponieważ chciałem, żeby animacja trwała w nieskończoność, dodałem do kodu parametr – repeatCount=”indefinite”.
Oto efekt finalny:
