A „webes vektorgrafikus formátum” kifejezésről a felhasználók többségének (már aki tudja, mi az a vektorgrafika) automatikusan a Flash ugrik be, esetleg néhányan még hozzáteszik azt is, hogy „és még a Silverlight”. Pedig 2001 óta W3C-ajánlás az SVG, azaz a Scalable Vector Graphics formátum. Cikkünkben megpróbáljuk egy kicsit körüljárni, hogy mi is az az SVG, és hogy hol is találkozhatunk ilyen állományokkal, alkalmazásokkal az interneten, mire használhatjuk őket.
Ha tömören – és kissé szárazon – szeretnénk megfogalmazni a lényeget, akkor az SVG (Scalable Vector Graphics) a W3 konzorcium által definiált nyílt szabványú XML-alapú leíró nyelv és fájlformátum kétdimenziós, statikus és dinamikus (animált vagy interaktív) vektorgrafikák számára. Bár első olvasatban talán kicsit ijesztő lehet ez a megfogalmazás, ám ha figyelmesen végigvesszük az egyes részeket, akkor kiderül, hogy semmi boszorkányság nincsen benne, sőt, sokak számára az internet egy új oldalát mutathatja meg.
A Wikipédiáról sok illusztráció SVG formátumban is letölthető, majd akár szerkeszthető
Az SVG szabvány elkészítését 1998-ban kezdte meg a SVG Working Group (www.svg.org), miután a Macromedia (amit azóta felvásárolt az Adobe) és a Microsoft bejelentette a VML-t (Vector Markup Language), míg az Adobe és a Sun Microsystems előállt a PGML (Precision Graphics Markup Language) névre keresztelt konkurens formátum ötletével. Az SVG Working Group munkájában szinte minden érintett cég képviseltette magát, így többek között az Adobe, az Autodesk, a Canon, a Corel, a Hewlett-Packard, az IBM, a Macromedia, a Microsoft, a Netscape, az Opera, a Sun és a Xerox is. Végül pedig az SVG 1.0 2001. szeptember 4-én lett W3C-ajánlás, amit másfél évvel később, 2003. január 14-én követett a mai napig hivatalos változat.
Vektorok és képpontok
Ahogyan az a szabvány teljes nevéből – és a fentebb leírt definícióból is – kiderül, a V a vektorgrafikát jelenti. De mit is takar ez a fogalom?
Ugyanaz a részlet raszteresen és vektorosan nagyítva – a különbség jól látható
Vektorgrafikának azt nevezzük, amikor a látható kép nem elemi képpontokból, vagy immáron elterjedt nevükön pixelekből épül fel, hanem különféle matematikai képletekkel meghatározható rajzelemekből, geometriai primitívekből, mint például egyenesekből, görbékből (Bézier-görbékből és spline-okból), körökből, ellipszisekből, négyzetekből, téglalapokból, szabályos sokszögekből stb. De miért, és főként mikor jó az nekünk, ha egy kép vagy illusztráció ilyen vektoros rajzelemekből épül fel? Leginkább abban az esetben, ha a kép méretét jelentős mértékben szeretnénk változtatni, hiszen ezeket az ábrákat minőségromlás nélkül lehet – szinte tetszőleges mértékben – nagyítani/kicsinyíteni, míg ugyanez a képpontokból álló, más néven pixelgrafikus vagy raszteres képekről nem igazán mondható el. Az első ábrán jól látható, hogyan néz ki a vektorosan megrajzolt autó egy részletének kb. hatszoros nagyítása raszteresen és vektorosan nagyítva. Ráadásul – ésszerű korlátok között maradva – ugyanaz az ábra sokkal kisebb helyett foglal el vektorgrafikus formátumban, mint akár még veszteségesen tömörített raszteres állományban.
Egy összetett SVG-alkalmazás a Német Statisztikai Hivatal oldalán
Ezenkívül az is nagy előnye a vektorgrafikus formátumoknak, hogy a megfelelő programok, eszközök birtokában sokkal egyszerűbb az egyes képrészletek változtatása is (elmozdítása, nagyítása, átszínezése stb.).
Egyébként szinte mindenki találkozott már számtalan vektorgrafikus formátummal, állományokkal, legfeljebb nem tudta róluk, hogy azok. Legjobb példa erre a népszerű PDF (Portable Document Format), vagy a bevezetőben is említett Flash formátum, amivel lépten-nyomon találkozunk böngészéseink során.
Elmélet: XML-alapokon
Attól sem kell senkinek megijednie, hogy a bevezetőben elmondtuk, hogy az SVG egy „XML-alapú leíró nyelv és fájlformátum”. A Weboldalkészítő suli sorozatunkban is elhangzott például, hogy az (X)HTML nyelv is egy XML-alapú leírónyelv, vagyis sokan úgy hoznak létre XML-alapú dokumentumokat, hogy nem is tudnak róla – vagy legalábbis nem igazán érdekli őket. Pontosan ugyanez (lesz) a helyzet az SVG grafikák esetében: tisztában kell lenni néhány szabállyal, esetleg kéznél tartani egy-egy jó sablont – és csak a lényegre, vagyis a rajzelemek létrehozására és elhelyezésére kell koncentrálnunk.
Mintánk négy böngészőben is szinte teljesen egyformán jelenik meg
E cikknek nem célja a Websuli mintájára egy SVG-iskola indítása – bár megfelelő érdeklődés esetén a későbbiekben néhány tipp erejéig természetesen visszatérünk a témára –, így most csak néhány érdekességet szeretnénk felvillantani. (Egy angol nyelvű „SVG-iskola” egyébként már található a neten, itt mindjárt ki is próbálhatjuk böngészőnk „SVG-tűrését” az egymást követő leckék View Example linkjeire kattintva.)
Ahogyan minden XML állományt, így az SVG-t is egy XML deklarációval kell kezdenünk, amit az XHTML-ekből is ismerős, ám itt természetesen kicsit eltérő DOCTYPE deklarációval folytatunk:
‹?xml version="1.0"?›
‹!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd"›
Amennyiben a későbbiek során grafikánkban szöveges elemeket is használni szeretnénk, úgy mindenképpen érdemes megadnunk a kódolás módját, például ‹?xml version="1.0" encoding="iso-8859-1"?› vagy ‹?xml version="1.0" encoding="UTF-8"?› formában.
Fejér megye korfája az idei magyar Statisztikai évkönyv CD-mellékletén
Mint minden rendes XML állományban, így az SVG-ben is lennie kell egy ún. gyökérelemnek. Ahogy az (X)HTML állományok esetében ez a ‹html›, úgy az SVG-kben a gyökérelem ‹svg› lesz. De amíg a ‹html› nem tartalmazhat újabb ‹html› elemeket, addig az ‹svg›-ben tetszőleges számú ‹svg›-t halmozhatunk fel – azonban miután erre igazán csak összetettebb grafikák esetén van igazából szükség, ezért ebbe ne is menjünk jobban bele.
Böngészőtesztelő mintánk teljes forrása
(A mentés más néven funkcióval .svg fájlként letölthető)
Az ‹svg› elem(ek) esetében nem árt – bár nem kötelező megadnunk a kép(részlet) méreteit. A méreteket – miután az esetek többségében mégiscsak képernyőn fognak megjelenni – alapértelmezés szerint képpontokban adjuk meg, de használhatunk még millimétert (mm), centimétert (cm), hüvelyket (in), pontot (pt – 1/72 hüvelyk), picát (pc – 1/6 hüvelyk) vagy százalékot (%) is.
Amíg például egy (X)HTML dokumentumban címsorokat (‹h1›, ‹h2›, ‹h3› stb.), bekezdéseket (‹p›), felsorolásokat (‹ul›, ‹ol›, ‹li›), táblázatokat (‹table›) és azok elemeit (‹thead›, ‹tbody›, ‹tfoot›, ‹tr›, ‹th›, ‹td›), képeket (‹img›) és egyéb elemeket hozunk létre, addig az SVG-ben grafikai elemeket definiálunk.
Így például ha egy vonalra van szükségünk, akkor egy ‹line› elemet kell összeállítanunk. Egy vonalat két végpontjával tudunk meghatározni, így az SVG-ben sem kell mást tennünk, mint megadni vonalunk két végpontjának koordinátáit: ‹line x1="10" y1="10" x2="100" y2="200" /› (a végén található perjelre azért van szükség, hogy ne kelljen a végére írnunk a lezáró ‹/line› címkét is). Ezzel létre is hoztunk egy egyenes vonalat a 10,10 ponttól a 100,200 pontig.
Hasonlóan egyszerűen rajzolhatunk kört, aminek mindössze a középpontját és a sugarát kell megadnunk: ‹circle cx="100" cy="140" r="50" /›; ellipszist, aminek eltérő az X és Y irányú sugara: ‹ellipse cx="300" cy="140" rx="75" ry="50" /›; vagy téglalapot, amelynek a sarokpontjainak a koordinátáit kell csupán tudnunk: ‹rect x="10" y="10" width="180" height="140" /›. Ez utóbbit még azzal „cifrázhatjuk”, hogy megadhatunk még vízszintes és függőleges lekerekítési sugarat is: ‹rect x="10" y="10" width="180" height="140" rx="20" ry="20" /›.
Mindezeken túl létrehozhatunk még töréspontjaival meghatározható nyitott (‹polyline›), valamint zárt (‹polygon›) elemeket, valamint egyenes és görbe szakaszokat egyaránt tartalmazó alakzatokat (‹path›) is. A ‹path› egyébként az SVG egyik leguniverzálisabb rajzoló eleme, hiszen létrehozásakor használhatunk abszolút és relatív koordinátákat, egyenes szakaszokat, ellipszisíveket. Valamint másod- és harmadfokú Bézier-görbeszakaszokat is (bár ilyeneket jellemzően nem „kézzel”, hanem valamilyen vektorgrafikus rajzolóprogrammal hozunk létre).
Természetesen az egyes rajzelemeknek nemcsak az alakját, hanem egyéb jellemzőit is meg kell tudnunk határozni. Így például fontos lehet, hogy a megjelenítő alkalmazásnak milyen vastag és milyen színű körvonallal kell megrajzolnia az egyes elemeket, ahogyan az is lényegbevágó, hogy a zárt alakzatokat milyen színnel, esetleg milyen színátmenettel vagy mintával kell kifesteni. Mindezeket – az (X)HTML-hez hasonlóan – közvetlen (inline) stíluselemekkel, beágyazott (embedded) vagy csatolt (linked) stíluslapokkal tudjuk megadni. Így például kiegészítve korábbi négyzetünk definícióját nem csupán azt adjuk meg, hogy a bal belső sarka a 10,10 ponton van, szélessége 180, magassága pedig 140 pixel, hanem azt is, hogy kék színnel kell kifesteni, a körvonalát pedig 5 pixel vastag sötétpiros kontúrral kell meghúzni: ‹rect x="10" y="10" width="180" height="140" style="fill: blue; stroke: #880000; stroke-width: 5;" /›.
A grafikák esetében természetesen az (X)HTML elemekétől teljesen eltérő stíluselemekre van szükség. Így egy SVG-be beágyazott vagy ahhoz csatolt CSS állományban nem margókat, eltartásokat, objektumfolyatási szabályokat, felsorolásjeleket és egyebeket kell megadnunk, hanem kitöltő színeket és –mintákat, vonalvastagságokat, -stílusokat, -végződéseket és –illesztéseket, valamint hasonló tulajdonságokat.
Mindezeken túl az SVG szabvány megalkotói számos olyan lehetőségre is gondoltak, amelyek egyrészt könnyebbé teszik SVG-grafikák, -animációk és -alkalmazások készítését. Így többek között nagyon egyszerűen tudunk létrehozni lineáris és radiális színátmeneteket, görbére illesztett szövegeket, koordináta transzformációkat, szimbólumokat, vágógörbéket és maszkokat, különféle szűrőket (vetett árnyék, Gauss elmosás, diffúz megvilágítás stb.), sőt, időalapú animációkat is.
Rajzoljunk SVG-t!
Természetesen ahhoz, hogy SVG formátumú állományokat hozzunk létre, nem kell feltétlenül tisztábban lennünk az XML és az SVG alapjaival. Ugyanis nem véletlen, hogy az SVG Working Groupban szakértőként – ahogyan azt korábban már említettük – például az Adobe és a Corel, vagyis a két legismertebb vektorgrafikus illusztrációs program, az Illustrator és a CorelDRAW készítői is benne voltak. Ugyanis mindkét program, és – az általunk több ok miatt is preferált – Xara Xtreme export formátumai között megtaláljuk az SVG-t, így az ezekben készült rajzokat – némi korlátozással – egyszerűen elmenthetjük SVG formátumba is. (Sőt, a CorelDRAW képes létrehozni GZIP-tömörítésű SVGZ formátumot is, ám ezek felhasználhatósága erősen korlátozott.)
A CorelDRAW X4-ba importálva vektorosak maradnak az SVG-grafikák
E fizetős alkalmazások mellett létezik egy ingyenes, nyílt forráskódú alkalmazás is, az Inkscape, amit kimondottan az SVG-re alapozva kezdtek el fejleszteni 2003-ban. (Egész pontosan az Inkscape ősét, a mára már kissé elmaradott Sodipodit 1999-ben kezdték írni, azonban a fejlesztőcsapat magja 2003-ban levált, és ekkor kezdődött az Inkscape története.)
Az Inkscape, ahogyan az említettük, egy, az SVG szabványra (is) támaszkodó, ingyenes, magyar nyelvű felhasználói felülettel is rendelkező vektorgrafikus rajzolóprogram – számos olyan eszközzel, amit sok grafikus nagy valószínűséggel szívesen fogadna az Illustratorban vagy a CorelDRAW-ban is. A program egyik – esetünkben – fontos funkciója, hogy a képek SVG-forrását közvetlenül tudjuk szerkeszteni, ráadásul ezeknek a javításoknak az eredménye azonnal meg is jelenik magán a rajzon.
Az Inkscape-ben párhuzamosan szerkeszthetjük a vektorgrafikus képet és az SVG-forrást
Ugyan az Inkscape natív formátuma az SVG, de azért számos más vektorgrafikus állománytípust, például PDF, AI, EMF, WMF, sőt XAML fájlokat meg tud nyitni, illetve ezek többségébe képes elmenteni az elkészült rajzokat. (Próbáink során az XAML formátummal meggyűlt a baja az Inkscape-nek, de sok sourceforge-os fejlesztéshez hasonlóan az Inkscape is még bőven 1.0-s verzió előtt tart, ezért ez még „belefér”.)
Ám ahogy azoknak a „webszerkesztőknek” az oldalain is meglátszik az alapok hiánya, akik csak FrontPage-dzsel készítettek honlapokat, itt elég hamar kiderül, hogy ki az, aki „látott már belülről” SVG-t, és ki az, akinél ez csak egy formátum a sok export lehetőség közül. Ugyanis amíg profi „SVG-s” által XML-szerkesztőben létrehozott fájlt az esetek többségében át lehet látni, és tovább lehet szerkeszteni, addig az exportált állományok leginkább a FrontPage-dzsel készült HTML-ekhez hasonlítanak, amit Spányik Balázs kollégánk szavaival élve „bottal sem piszkálnánk meg”.
Dinamikus SVG-k
Ahogyan azt cikkünk legelején is említettük, az SVG egy XML-alapú leíró nyelv statikus és dinamikus vektorgrafikák számára. De mit takar a dinamikus jelző a vektorgrafikák esetében? Gyakorlatilag majdnem pontosan ugyanazt, amit a Flash animációk és alkalmazások esetében. Vagyis idő- (de nem időegyenes) alapú animációkat és ECMA Script, vagyis JavaScript-alapú, jellemzően a dokumentumobjektum-modellre (DOM) alapozott animációkat és programokat.
Hamarosan ilyen lesz a KSH megújult Területi atlasza
Ha például szeretnénk egy téglalap méretét, helyét és színét megváltoztatni, akkor a korábbi ‹rect x="10" y="10" width="180" height="140" /› téglalapunk leírását megváltoztatjuk egy kicsit:
‹rect x="10" y="10" width="20" height="20" style="fill: blue; stroke: black; stroke-width: 2;"›
‹animate attributeName="x" from="10" to="200" attributeType="XML" begin="0s" dur="3s" fill="freeze" /›
‹animate attributeName="width" from="20" to="50" attributeType="XML" begin="1s" dur="2s" fill="freeze" /›
‹animate attributeName="fill" from="blue" to="red" attributeType="CSS" begin="0s" dur="3s" fill="freeze" /›
‹/rect›
E kód eredményeképpen az SVG betöltődését követően a kis négyzetünk elkezd jobbra mozogni, majd egy másodperccel később szélesedni, miközben kifestése kékről pirosra változik – és mindez összesen 3 másodperc alatt zajlik le. Mindezt fokozhatjuk azzal is, hogy a begin paraméterbe nem egy konkrét időpontot írunk be, hanem például azt, hogy "kor.end+1.5s", ami azt jelentené, hogy animáció másfél másodperccel később induljon el, mint amikor a kor azonosítójú elem (id=”kor”) animációja befejeződött. De lehetőségünk van azt is megadni, hogy egy animáció többször fusson le (repeatCount, repeatDur), ahogyan a mozgást egy előre definiált görbéhez is illeszthetjük, akár automatikus elforgatással is!
Az ONS SVG-alapú „korfa-motorját” több ország is átvette
JavaScriptből pedig tényleg szinte bármit megtehetünk, kezdve az elemek tulajdonságainak megváltoztatásától az új elemek létrehozásáig és a meglévők törléséig. Természetesen mindezeket összekapcsolhatjuk a különféle egér- és billentyűesemények figyelésével, hogy igazi interaktív grafikákat hozhassunk létre.
SVG a nagyvilágban
Az SVG kezdeti lendületét jelentős mértékben megtörte, amikor az Adobe – a Macromedia, és így a Flash-technológia megszerzését követően – kiszállt a támogatásából. Addig ugyanis az Adobe SVG Viewer volt az „SVG Internet Explore”, a fejlesztők szinte kizárólag ehhez igazították alkalmazásaikat. Ám miután szerencsére a Wikipédia az SVG-t tette meg a vektorgrafikus illusztrációk szabványos formátumává, a böngészőfejlesztők (a Microsoftot leszámítva, amelyhez azonban még mindig használható az Adobe SVG Viewer) egyre nagyobb figyelmet kezdtek szentelni az SVG-nek is. Így a codedread legutóbb 2008. szeptemberben frissített SVG-tesztjein az Opera 9.5 kiváló, a Firefox 3, a Safari és a Chrome 0.2 pedig erős közepes eredménnyel végzett. Miután pedig a WebKit nyílt forráskódú böngészőmotor egyre jobb eredményekkel fut ezen a teszten, az ezekre alapozó böngészők is egyre inkább „SVG-kompatibilisekké” válnak.
Az Eurostat TGM (Tables-Graphs-Maps) rendszerét idén „adták át” a nagyközönségnek
Érdekes módon SVG alkalmazásokkal – néhány egyetemi projekt mellett – elsősorban a statisztikai hivatalok honlapjain és lemezmellékletein találkozhatunk. Így például az Eurostat tavaly megújított táblázat-rendszerének adatait SVG-alapú interaktív grafikonokon és tematikus térképeken is megtekinthetjük, ahogy számos európai statisztikai hivatal vette át az angol Alan Smith által kifejlesztett látványos SVG-s korfaprogramot és a személyi inflációkalkulátort. A Magyar Statisztikai Hivatal honlapján is hamarosan megújul az interaktív tematikus térképrendszer (www.ksh.hu/maps) motorja, így ezek nemcsak az Internet Explorer–Adobe SVG Viewer páros alatt, hanem Firefox, Opera és Chrome alatt is működni fognak. Legyünk türelemmel; az ilyen, gyakran rengeteg részletből álló térképek megjelenítése gyakran sok időt és memóriát igényel!
MELLÉKLET:
David J. Eisenberg: SVG kézikönyv – A méretezhető vektorgrafika készítése XML-lel
Ha valaki szeretne alaposabban megismerkedni az SVG alapjaival és lehetőségeivel, érdemes elolvasnia David Eisenberg könyvét. A kötet valóban az alapoktól és az alapobjektumoktól indul ki. Lépésről lépésre haladva mutatja be az SVG-szabványt, valamint az általa kínált lehetőségeket, egészen a különféle szűrőkig és az SVG-, valamint JavaScript-alapú animációs és interaktivitást lehetővé tevő technikákig. A függelékekben hasznos – ám a téma okán erősen szűrt – kiegészítő információkat találunk az XML-ről, a CSS-ről, programozási alapismeretekről, sőt még a mátrixalgebráról is.
Kossuth Kiadó, 2003; 343 oldal, 4 990 forint
