Nem nagy titok, hogy szeretjük az SVG formátumot, aminek már többször is hangot adtam itt a blogon (mutattam már be több ingyenes ikonkészletet, pl. itt és itt, no meg remek online svg eszközöket is). A vektoros formátumok szépsége, hogy minden kijelzőn a lehető legélesebb körvonalakkal jelennek meg, könnyen szerkeszthetőek, átszínezhetőek, és a képernyőn elfoglalt méretüktől függetlenül minimális helyet foglalnak.
Ezek mellett van még egy remek képessége a Scalable Vector Graphic formátumba csomagolt rajzoknak: nagyon egyszerűen animálhatóak, a mozgó SVG-k pedig a vektoros animációkra jellemző elegáns folyamatossággal mozognak, hiszen a mozgás nem fázisok cserélgetésével történik, hanem a beadott útvonalak mentén a képet alkotó vektorok mozdulnak odébb, pixelről pixelre.
A mozgó SVG-k bűvöletében gondolhatta úgy Philip Ardeljan ausztrál UI designer barátunk, hogy súlyosan elhanyagolt ez a terület a web- és UX design világában, így piaci rést orrontva, gyorsan meg is jelentette az ismeretlen okokból Loaf (cipó) névre keresztelt megoldását.
A Loaf a mai trendekhez képest kicsit anakronisztikus módon egy önálló, letöltendő alkalmazás, nem a megszokott online webappok népes táborát gyarapítja. A cipó névleg egy SVG szerkesztő alkalmazás, aminek mellesleg beépített animált könyvtára is van, de kicsit közelebbről megnézve azonnal rájöhetünk, hogy ez valójában fordítva igaz, hiszen az editor nagyon kevés (bár hasznos) funkcióval rendelkezik, és a jelenlegi formájában nem tud külső fájlokat sem megnyitni (az Open menüpontra nekem konkrétan semmi nem történt, de ez lehet egyéni bug is).
Na de mit tud?
A Loaf könyvtára pillanatnyilag 555 animált ikont/piktopgramot tartalmaz, ezek közül 75 ingyenesen használható, a többi eléréséhez elő kell fizetni a szolgáltatásra, vagy egy egyszeri összegért cserében örökös tagságot szerezni (ez mondjuk a jelenlegi állapotban elég nagy bizalmat feltételez a fejlesztő irányában, hiszen egy egyszemélyes projektről beszélünk).
Az editorban megváltoztathatjuk a vonalak és kitöltött felületek színét és a vonalak vastagságát, valamint az animáció sebességét és az egész piktogram nagyságát. Ez ugyan nem sok, mégis ad a kezünkbe némi kontrollt a végeredmény felett.
Ha megtaláltuk a számunkra leginkább megfelelő külsőt és tempót, a végeredményünket lementhetjük SVG fájlként, de akár a hozzá tartozó kódrészletet is egyszerűen a vágólapra másolhatjuk, hogy aztán kódként helyezzük el az oldalunkban.
Nagyon drukkolok Ardeljannak, a vállakozás számomra nagyon szimpatikus, és ha sikerrel jár, a jövőben még sok ikonnal bővülhet a kis cipó, mindenki legnagyobb örömére.