Régóta foglalkoztat az SVG. A rövidítés a Scalable Vector Graphics szavakra áll - átméretezhető vonalas grafika. Az SVG azért jó, mert nyílt szabványra épül, melyet a W3C alapítvány gondoz és XML alapú, tehát nagyon jól beleilleszthető a jelen programozási keretekbe.
SVG a böngészőkben
Az SVG támogatását egyelőre nem sikerült még böngészőkben tesztelnem, de állítólag a Safari Macen már támogatja és a Firefoxnak is van egy csoportja, aki az SVG implementálással foglalkozik. (Talán az ősmozilla vagy a konqueror tudja alapból már?) Az IE 7 és az SVG kapcsolatáról mit sem tudok, viszont már az is haladás, hogy megoldották benne az alpha channel-es PNG támogatást - ez viszont csak egy zárójeles megjegyzés.
SVG rajzoló app-ok
Mely programokkal tudunk tehát SVG-t kezelni: Adobe Illustrator vagy Corel Draw és hardcore-sok még ismerhetik a Macromedia Freehandet is. Tehát egy vektorgrafikus szerkesztőprogram szükségeltetik hozzá, hogy SVG fájlt tudjunk létrehozni. A háromból a legjobb az Illustrator, de az sem tud szabványos SVG-t csinálni. Megjegyzem akár Notepadben is írhatunk SVG-t, csak az egy kicsit talán nehezebb, hiszen nem látjuk élőben, hogy mit is hozunk létre. Jogos a kérdés, hogy akkor van-e egyeltalán létjogosultsága az SVG-nek - főleg miután az Adobe nagyon bebukta az SVG-fejlesztést, majd jól fel is vásárolta a Flasht illetve hát az egész Macromedia családot?
A válaszom, hogy van. SVG-rajzolásra egy programot tudok igazán ajánlani, a nyílt forrású Inkscape-t, ami windows, mac, és linux alá is elérhető. A fejlesztés még ugyan nem érte el az 1.0-s stabil verziót, de nagyon kecsegtetőek már az eddigi eredmények is. (Az Inkscape csapata a Sodipodi csoportból vált ki, ennek azt hiszem már leállt a fejlesztése, de anno ez is egy jó kezdeményezésnek tűnt.)
Az Inkscape tényleg egy nagyon kellemesen használható program, persze küzd egy pár gyerekbetegséggel, de azért 4-5 év DTP-s és vektorgrafikus programtapasztalat után kijelenthetem, hogy az Inkscape egy nagyon is erőteljes program. Nyomtatni is lehet belőle, RGB és CMYK támogatással működik, direktszínek ugyan nincsenek benne, de tulajdonképpen az SVG-t nem offline használatú anyagok előkészítésére találták ki, bár, ha egy honlap részletét akarnánk kinagyítva kinyomtatni jó minőségben, akkor erre is teljesen alkalmas lenne az SVG.
Az Inkscape 100%-os nézetben pedig pixel-by-pixel alapon mutatja a grafikánkat, nagyon jól renderel, ezért alapvetően alkalmas lenne web design készítésére. (Eddig csak egy embert ismertem, aki Illustratorban web dizájnolt, elképzelhetőnek tartom, hogy ez is egy út lehet.)
Az SVG elméleti előnyei és felhasználási lehetősége a designban
Miért is lehetne jó, ha SVG-alapú grafikákat használnánk egy designban? A helyzet a következő, egy layoutot a böngészőablak szélességehez képest százalékosan is meghatározhatunk. Ez a dolog leginkább horizontálisan működik, vertikálisan sok buktatót rejt, a magasság nem tud a vízszinteshez képest arányosan nőni vagy csökkeni. Így a mai layoutok maximum szélességükben flexibilisek (már amelyiket nem fixre terveztek!). És persze a raszteres képek sem tudnak minőségromlás nélkül nőni, tehát sajnos manapság egy oldalon leginkább a szöveget lehet nagyítani, illetve az aktuális böngésző-szélességhez arányosan igazítani a layoutot, a háttérképek továbbfolynak vízszintesen és így "szélesedik" a design is, azonban a nagyítás szó szoros értelmében véve nem történik nagyítás (méretnövekedés) a designban, egy 100*100 pixel kiterjedésű kép nem lesz 200*200 pixel nagyságú például.
Az SVG-vel azonban igazi újítást lehetne véghez vinni. Képzeljünk el egy dobozt, amiben van egy logo. A doboz szélességértékét százalékosan adjuk meg. Vagyis a valós (fizikai) szélesség egy 1600*1200-as felbontású képernyőn 60%-os érték mellett nagyobb lesz, mint 1024*768-as felbontásnál (több lesz pixelszámban, mert az 1024 pixel 60%-a kevesebb, mint az 1600 pixel 60%-a). Az SVG grafikánk méreteit 100%-nak adjuk meg a dobozhoz képest, hogy azt kitöltse. Ha lehet olyan scriptet írni, amivel a magasságértéket a szélességértékkel egyenesen arányosan tudnánk növelni, akkor torzulás és minőségromlás nélkül nagyítódhatna fel példánkban a logo.
Ha egy layoutban mindent százalékosan adnánk meg, akkor a szöveggel együtt a grafika is arányosan nagyobb lehetne. Tehát a designunk egy nagyobb felbontású képernyőn pixelekben többet használna fel, mint egy kisebb felbontásún. Az egyetlen hátrányt ott látom, hogy ez nem mindenhol lenne hasznos. Vegyünk egy példát: az én laptopom képernyője 1024*768-as felbontású, a fizikai szélessége pedig 30cm. Ha ugyanezen a 30cm szélességen egy 1600*1200-as felbontású képernyő lenne, egy 100*100 pixeles képet fizikailag kisebbnek látnék rajta. Azonban, ha az én laptopom 1024*768-as felbontásához és fizikai méretéhez (15") képest veszünk fizikai méretben 19"-os monitort 1600*1200-as felbontással, akkor ott lehet, hogy ugyanazt a 100*100 pixeles képet már nem látom kisebbnek, mint a laptopon, mert a pixelek fizikai méretei ugyanakkorák a két képernyőn.
Valószínűleg tehát a képernyőfelbontáshoz történő automatikus átméreteződés nem lesz átütő siker, viszont az szinte biztos, hogy olyan layoutokat lehetne létrehozni, amelyek például Firefoxban romlás nélkül nagyíthatók lennének, és akkor a felhasználó maga döntheti el, hogy milyen nagyságban szeretné nézegetni az oldalunkat. Olyan, mintha egy újságot nagyító alatt néznénk és mi döntnenénk el, hogy mekkorában szeretnénk látni az újságot és ehhez képest határozzuk meg a nagyító és az újság távolságát.
Kapcsolódó linkek:
- Camino:
Gecko renders web pages more accurately than any other rendering engine on the planet. Not only is it incredibly fast but it also supports the latest W3C web standards such as XML, XHTML, DOM, CSS, and SVG.
Update: Eszpee kommentje után megnéztem az Opera oldalát, és valóban, az Opera támogatja az SVG 1.1-es szabványt. A Firefox 2.0-ban az Opera demoanimációja egyeltalán nem működött, ez csalódást okozott, viszont az IE 7 egyből felajánlotta, hogy telepíti az SVG viewert, és utána egy fura kerettel ugyan, de szépen lejátszotta az animációt. Ha a böngészőfejlesztők ennyire komolyanveszik az SVG-t, mindenki számára ingyenes alternatívát jelenthet majd az SVG a flash helyett, persze nem minden téren, de azt hiszem a web mostanában egyre jobban kezd eltávolodni a Flash-től. Kivéve a videoszolgáltatások, mert így platformfüggetlenül tudnak működni.
Nem utolsó, hogy az SVG már a közeljövőben ezekszerint ingyenes alternatívát nyújthat a hobbi és akár profi designerek számára.
