SVG
SVG Az SVG egy olyan XML alkalmazás, amit vektoros grafikai tartalmak létrehozására fejlesztettek ki. SVG = Scalable Vector Graphics A W3C fejlesztette ki, olyan neves cégekkel, mint pl. az Adobe Teljes dokumentáció: http://www.w3.org/graphics/svg Az SVG jelenlegi legfrissebb változata az 1.1-es Az SVG grafikák egy lehetséges megjelenítési módja az Adobe SVG Viewer, jelenleg a 3.03-as változatnál tart
Vektor és pixelgrafika Pixel Egy bitmap kép tárolja, hogy a kép egyes pixeleit hogyan kell megjeleníteni Pl. egy 64x64-es képnél 4096 leíró információegység van, ami tárolja a pixel színét Nagy tárhelyet igényelnek Nehézkesen szerkeszthetők Nehezen vihetők át hálózati kapcsolaton Fotók tárolására ez a legjobb megoldás Vektor Nem pixelek összetételéből keletkezik, hanem matematikai műveletek eredményeként Az objektumokat matematikai egyenletekkel írják le Pl.: egy piros körhöz csak a kör középpontját, a sugarat és a színt kell megadni Az átméretezés nem jár minőségvesztéssel Az SVG fájlok szöveges fájlok
Az SVG és vele rokon technológiák Microsoft Kidolgozta az XML alapú VML-t (Vector Markup Language) Előnye, hogy beépül a Microsoft Office 2000 rendszerbe A Word, Excel és PowerPoint rajzeszközeinek használatakor ilyen VML fájlt szerkesztünk a háttérben Nem lett sikeres, mert nem vált szabványossá, maradt helyette az SVG Macromedia Flash WYSIWYG szerkesztő SWF formátumba menti a grafikát, és erős az animációk terén is Mindent tud amit az SVG, a fejlesztői inkább az animációkra koncentrálnak Hátránya, hogy az SWF egy bináris fájl nem javíthatunk bele szövegszerkesztővel SVG mobil eszközökön Az SVG alkalmazható mobil eszközökön Két változat van SVGT: az SVG látványosan összezsugorított változata, kis hardver kapacitású mobiltelefonok SVGB: PDA-knál használják, nagyobb hardverigényű, mint az SVGT
Az SVG nyelv belülről Mint minden XML dokumentumnak, így az SVG-nek is rendelkeznie kell egy gyökérelemmel, ennek neve svg Ez az elem foglalja magába a teljes rajzot A használható elemeket 3 csoportba soroljuk: primitív vektoralakzatok (négyszögek, körök, stb.) vektoros szövegek külső bitképek A szövegek stílusainak kialakításához a CSS attribútumait használhatjuk Koordinátarendszer Feladata: meghatározza a rajzon a távolságokat, egy viszonyítási rendszert ad A rajzon a méretek megadhatók: pixel(px), pont (pt), inch(in), centiméter(cm) Ha nem adunk meg mértékegységet, akkor az SVG ún. helyi egységet használ Az SVG rajzlap mindkét irányban végtelen, de célszerű width és height értékeket megadni neki.
SVG rajz létrehozása Bármilyen szövegszerkesztővel WYSIWYG szekesztők: CorelDraw Adobe Illustrator Batik: Apache-t készítő csapat műve, Java alapú Visio: Microsoft Draw: OpenOffice SVG dokumentumok megjelenítése Böngészővel, amely támogatja az SVG-t. Pl.: Amaya Használhatunk egy megfelelő bővítményt, az SVG-t nem támogató böngészőknél. pl. Firefox-hoz az Adobe SVG viewer A Firefox csak HTML-be ágyazva támogatja az SVG-t, az előbbi bővítményt feltelepítve beágyazás nélkül is megnyithatjuk az SVG fájlokat Használhatunk SVG megjelenítésre szolgáló programot
SVG rajz létrehozása Az svg gyökérelem tulajdonságai, gyermekelemei width height Mértékegységek: px, in, cm, pt Ha nem adunk meg mértékegységet, akkor dimenziómentes lokális egységet használ. Azért lokális, mert mindig az adott eszközön történő megjelenítéshez állítja be a méreteket. title elem: a dokumentum címét határozza meg <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <title>circle 1</title> <circle r="100px" cx="200px" cy="200px"/> </svg>
Alakzatok rajzolása Kör: circle elem segítségével paraméterek: r sugár, cx és cy középpont x és y koordinátái Téglalapok: rect elem segítségével paraméterek: x a téglalap bal felső sarkának az origótól való vízszintes távolsága y a téglalap bal felső sarkának az origótól való függőleges távolsága width téglalap szélessége height - téglalap magassága Formázás A style attribútum segítségével az alakzatokat lehet formázni CSS stíluselemekkel. Style elem nélkül is megadhatók az alakzatoknak formázási tulajdonságok. Pl: stroke= blue, stroke-width= 10, fill= red, stb. Bővebb leírás: http://www.w3.org/tr/svg/styling.html
Alakzatok rajzolása Ellipszisek: ellipse elem segítségével Paraméterek: cx, cy a középpont x és y koordinátája rx, ry az x és y tengellyel párhuzamos sugár Pl.: <ellipse rx="50px" ry="20px" cx="500px" cy="300px" fill="red"/> Vonalak: line elem segítségével Paraméterek: x1, y1 a vonal kezdőpontjának koordinátája x2, y2 a vonal végpontjának koordinátája Pl.: <line x1="300" y1="150" x2="600" y2="340" stroke="green"/>
SVG összetett alakzatok Poligon: tetszőleges számú oldallal határolt zárt alakzat polygon elem segítségével a csúcsok pontjainak megadása a points attribútummal történik. A pontpárokat szóközzel kell elválasztani, a pontpárok x és y koordinátáit pedig vesszővel. Amennyi pontpárt megadunk, a poligonnak annyi csúcs lesz. Pl.: <polygon points="60,150 160,60 260,150 210,250 110,250" style="fill:red; stroke:black; stroke-width:3"/> Polivonal: a különbség az a poligonhoz képest, hogy az első és utolsó pontot nem köti össze vonallal Pl.: <polyline points="60,150 160,60 260,150 210,250 110,250" style="fill:red; stroke:black; stroke-width:3"/>
SVG alakzatok formázása CSS-sel SVG-ben leggyakrabban használt stíluselemek: Külön attribútumokban adjuk meg a tulajdonságokat stroke az alakzat körvonalának a színe fill az alakzat belsejének a színe (a polyline elemnek is lehet fill tulajdonsága) stroke-width a körvonal vastagsága a színek megadásánál használhatjuk az előre beépített színeket (green, blue, black, stb.) illetve használhatjuk a hat karakterből álló hexadecimális színkódot, amit # előz meg. Pl.: <circle r="100px" fill="#00ff00" stroke="#ff0000" stroke-width="10cm" cx="400" cy="400"/> Style elemben adjuk meg a tulajdonságokat A másik lehetőség, hogy style attribútumban adjuk meg az előbbi tulajdonságokat, de az előző megoldás egyszerűbb. Pl.: <circle r="100px" cx="400" cy="400" style="fill:#00ff00;stroke:#ff0000;stroke-width: 10cm;"/>
SVG alakzatok formázása CSS-sel A class elem használata A harmadik lehetőség, hogy egy class elemmel adjuk meg a stílust Pl.: <polyline points="60,150 160,60 260,150 210,250 110,250" class="pol"/> Egy css állományban definiáljuk ezt a pol osztályt, és hozzácsatoljuk az SVG-hez.pol { stroke: blue; stroke-width: 40px; } Hozzácsatoljuk a css állományt az SVG dokumentumhoz <?xml-stylesheet type="text/css" href="style.css"?> Rengeteg egyéb formázási lehetőség van, akit érdekel: http://www.w3.org/tr/svg/styling.html
Kitöltés színátmenettel Színátmenetek esetén 2 lehetőségünk van: lineargradient radialgradient Egy ilyen színátmenetet definiálva azt már használhatjuk a dokumentumban bárhol, a színátmenetnek kell egy egyedi id!!!! Mindkét elemnek van egy stop nevű gyermekeleme, ami meghatározza a színek közötti váltás helyét A stop attribútumai: offset a színátmenet által átívelt távolságot adja meg, százalékban adjuk meg az értékét stop-color az átmeneti pontnál kezdődő színt adja meg fx és fy radiális színátmenet belső körének középpontja cx és cy radiális színátmenet külső körének középpontja A használathoz a színátmenetet <defs></defs> elemek közé kell rakni, így hivatkozhatunk az id-jére Az adott alakzatnál a fill értékeként meg kell adni az url(#id) értéket.
Példa színátmenetre <defs> <lineargradient id="linear"> <stop offset="0%" stop-color="red"/> <stop offset="75%" stop-color="blue"/> </lineargradient> <radialgradient id="radial" cx="50%" cy="50%" fx="50%" fy="90%"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="blue"/> <stop offset="100%" stop-color="green"/> </radialgradient> </defs> <rect width="200" height="300" x="200" y="300" fill="url(#linear)" /> <rect width="200" height="200" x="500" y="100" fill="url(#radial)" />
Szöveg létrehozása SVG-ben Szöveg létrehozása a text elem segítségével Paraméterek: x és y a szöveg kezdőpontjának koordinátái formázással kapcsolatos tulajdonságok: font-family betűtípus, pl.: Times, Arial, Verdana, Helvetica, Courier font-size betűméret font-weight betű vastagsága Pl.: <text x="100" y="100" font-size="30" font-family="times">ez egy próbaszöveg</text>
SVG beágyazása weboldalba Gyakran lehet szükség valami egyszerűbb grafika beszúrására weboldalba. Az SVG grafikák beágyazhatók weboldalba Beágyazás: embed elemmel történik paraméterek: width az SVG kép szélessége height az SVG kép magassága src az SVG dokumentum elérése align igazítás, pl. left, right, center pluginspace= http://www.adobe.com/svg/viewer/install/, ezt meg kell adni, mert az SVG-t nem támogató böngészők itt találják a szükséges bővítményt Pl.: <embed width="600" height="600" src="gradient.svg" pluginspace="http://www.adobe.com/svg/viewer/install/">
Feladat 1. Céltábla készítése: 5 színes sáv, benne 10, 20, 30, 40, 50 feliratokkal 2. Oszlopdiagram: egy xml dokumentumból, amely adatokat tartalmaz, xslt segítségével állítsunk elő oszlopdiagramot Segítség: a html elembe paraméterként: xmlns:svg=http://www.w3.org/2000/svg az egyes elemek sorszámát megkapjuk: <xsl:number value="position()"/>