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
Macromedia Flash
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 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
<svg xmlns="http://www.w3.org/2000/svg">
Circle 1
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.:
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.:
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.:
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
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:
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:
linearGradient radialGradient
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> 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>
<stop offset="0%" stop-color="red"/> <stop offset="75%" stop-color="blue"/> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="blue"/> <stop offset="100%" stop-color="green"/>
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.:
Ez egy próbaszöveg
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()"/>
