Az SVG egy olyan XML alkalmazás, amit vektoros grafikai tartalmak létrehozására fejlesztettek ki.

Átírás

1 SVG

2 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ó: 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

3 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

4 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

5 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.

6 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

7 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" " <svg xmlns=" <title>circle 1</title> <circle r="100px" cx="200px" cy="200px"/> </svg>

8 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:

9 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"/>

10 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, ,60 260, , ,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, ,60 260, , ,250" style="fill:red; stroke:black; stroke-width:3"/>

11 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;"/>

12 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, ,60 260, , ,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:

13 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.

14 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)" />

15 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>

16 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= 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="

17 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= az egyes elemek sorszámát megkapjuk: <xsl:number value="position()"/>