A bevezetőben már szó volt arról, hogy hogyan lehet elkészíteni egy rajzlapot SVG-ben. Az eddigi példák során ugyanazt a rajzlapot használtuk, minden ábra egy 200 képpont magas és ugyanilyen széles volt. Ráadásul a koordinátarendszer is minden egyes ábrán azonos volt, az origó a bal felső sarokban helyezkedett el, a tengelyek vízszintesen jobbra, ill. lefelé mutattak. Az eddig megismert módszeren kívül számos más lehetőség is kínálkozik egy razjlap elkészítésekor. Ebben a fejezetben erről lesz szó.
Már egy rajzlap méreteinek megadásakor is számos lehetőség áll rendelkezésünkre. Ha a méret mellé nem írunk mértékegységet, akkor az alapértelmezett mértékegység, a képpont lesz a kép méretének meghatározója. Ezen kívül számos mértékegységet is használhatunk a width és a height megadásakor. Minden esetben fontos, hogy a számot a mértékegységtől nem választhatja el semmilyen karakter, egybe kell írni őket. Az egyes mértékegységek jelölését az alábbi táblázat tartalmazza.
| px | képpont (ez az alapértelmezett, nem kötelező kiírni) |
| em | az alapértelmezett betűkészlet mérete |
| ex | az alapértelmezett betűkészletben az x karakter mérete (csak az x karakterre használható mérettípusról van szó, ep, ea, stb. megjelölések értelmetlenek) |
| in | inch (hüvelyk) |
| pc | pica (1/6 hüvelyk) |
| pt | pont (1/72 hüvelyk) |
| cm | centiméter |
| mm | milliméter |
| % | százalék (egymásba ágyazott rajzlapok esetén) |
A szélesség és a magasság megadásakor nem kell mindkét irányú kiterjedésnél ugyanazt a mértékegységet alkalmaznunk. A táblázat utolsó sorában a százalékos megadás lehetősége kissé meglepő lehet.
A megismert mértékegységek nem csak a koordinátarendszer kijelölésekor, hanem alakzatok helyének megadásakor is használhatók. Azaz megadhatjuk például egy kör sugarát cm-ben is. A rajzlap mértékegysége nem befolyásolja a rárajzolt alakzatok adatainak megadását, azaz ha cm-ben készítettük el a rajzlapot, attól még a rajta elhelyezkedő ház adatait megadhatjuk pixelben is. Ezen kívül lehetőség van arra is, hogy az adatokat a rajzlap méreteihez képest százalékos értékben adjuk meg.
A rajzok elkészítése során lehetőségünk van arra is, hogy több svg elemet ágyazzunk egymásba. Vagyis egy már elkészült kép akár teljes egészében is bemásolható egy másik dokumentum törzsébe. Az alábbi példán jól látszik, hogy mit is jelent ez.
Az ábrán egy narancssárga téglalap helyezkedik el. Előtte kétszer szerepel az 5/3. feladatban megrajzolt két fa. Ezeket a fákat bemásolhatnánk "kézzel" is, kiszámolva az új koordinátákat. Ez azonban meglehetősen munkaigényes eljárás lenne egy bonyolultabb kép esetében.
A fenti módszer helyett egyszerűen elegendő a teljes kép forrásának átmásolása. Néhány jellemző beállítása után a kép már meg is jeleníthető. Be kell állítanunk a beágyazott kép méreteit, és hogy a bal felső sarka hol helyezkedik el az új ábrán. Ez a példában az eredeti rajzlaphoz képest százalékos arányban van megadva. Ezen kívül, ha a beágyazott kép és a rendelkezésre álló terület eltér egymástól, akkor ennek kezelési módját is be kell állítanunk. Erről a fejezet későbbi részeiben lesz szó. A példában az egyszerűség kedvéért a beágyazott kép és a számára kijelölt terület mérete megegyezik.
Használhatunk az svg elemben két újabb attribútumot, x és y. Ezek segítségével adható meg a beágyazott elem bal felső pontjának helye.
Ez a lehetőség egyszerű módszert szolgáltat arra, hogy a már meglévő grafikákból egyszerűen, gyorsan és rugalmasan, az eredeti tulajdonságokat megtartva hozzunk létre összetett képeket. Nincs szükség a kezdeti képek adatainak módosítására, és az sem okoz gondot, ha a méretarányok nem megfelelőek.
Azt már láttuk, hogy az SVG szabad kezet ad a különböző rajzlapok létrehozásához. Előfordulhatnak azonban olyan esetek, amikor az eddigi ismereteinknél hatékonyabb eszközökre van szükségünk.
Képzeljük el, hogy a feladat egy cég logójának elkészítése és megjelenítése a weboldalán több méretben! Ha raszteres grafikákkal dolgoznánk, akkor ez úgy lehetne megoldható, hogy minden méretben elkészítjük a grafikát, vagy ha erre nincs lehetőség, átméretezzük a képet. Az első módszer nagyon időigényes, a második pedig a minőség romlásával járhat. A különböző méretek elkészítése SVG-ben sem lenne egyszerű feladat. Egy összetettebb grafika 4-5 méretben való elkészítése számtalan koordináta kijavítását igényelné. Szerencsére ennél egyszerűbb módszer is akad. Ez tulajdonképpen az átméretezés, ami azonban - mivel vektorgrafikus képről van szó - nem jár a minőség romlásával.
A méret megváltoztatását úgy érhetjük el, hogy a szélesség és a magasság értékét módosítjuk, miközben a koordinátarendszer méreteit rögzítjük. Erre szolgál az svg elem viewBox attribútuma. Ebben az attribútumban négy értéket kell megadnunk szóközökkel elválasztva (a táblázat szerinti sorrendben):
| xmin | A bal felső sarok x koordinátája. |
| ymin | A bal felső sarok y koordinátája. |
| szélesség | A koordinátarendszer beosztásainak száma vízszintes irányban. |
| magasság | A koordinátarendszer beosztásainak száma függőleges irányban. |
Meggondolandó, hogy miért van szükség egy újabb attribútum bevezetésére. Erre nagyon egyszerű a válasz: ha csupán a szélességet és a magasságot módosítanánk, akkor semmi sem garantálná, hogy a rajz tartalma is az új méreteknek megfelelően jelenjen meg. Sőt éppen az ellenkezője történne: a rajz kilógna a rajzlapról vagy nem töltené ki azt.
6/1. feladat:
Az 5/3. feladatban elkészített fákat méretezd át úgy, hogy a megjelenített kép
legyen. A méretezést a viewBox attribútum beállításával végezd el. A koordinátarendszer maradjon az eredeti 200×200 pixeles méretű.
Érdemes megfigyelni, hogy a méretezést egyetlen értékpár (szélesség és magasság) módosításával végeztük el, így a keletkező fájl mérete sem változott jelentősen.
6/2. feladat:
Készíts egy 500×250 pixeles rajzlapot. A használt koordinátarendszer origója a rajzlap közepén legyen, a függőleges tengelyén a -100 és +100 közötti értékek jelenjenek meg a vízszintes tengelye pedig a -50; +50 intervallum legyen. Készíts az origóba egy 30 egység sugarú kék kört. A kör határoló vonala legyen vastag, sárga és szaggatott.
Az eddigi példák mindegyikénél az a szerencsés helyzet állt fenn, hogy a koordinátarendszer arányai megegyeztek a megjelenítendő kép oldalarányaival. Azonban semmi sem akadályoz meg minket abban, hogy eltérő méretarányt használjunk, azaz például a megjelenő kép függőleges irányban a koordinátarendszerben meghatározott méret kétszerese, vízszintes irányban pedig a fele legyen. Az ilyen torzított megjelenítések esetén többféle elv szerint is működhet a megjelenítő.
Ezek a megoldási lehetőségek ismerősek lehetnek azok számára, akik készíttettek már papírképet digitális fényképezőgéppel készített képről. A hagyományos filmek és a digitális képek oldalainak aránya nem egyezik meg, ezért el kell dönteni, hogy a papírkép szélein keletkezzen-e üres terület vagy a fénykép kisebb része ne legyen látható a képen.
A harmadik esetben az eredmény egyértelmű, míg az első két lehetőség választása esetén további döntéseket kell hozni. Felmerül kérdésként, hogy a kitöltetlen területek hol helyezkedjenek el a képen, ha pedig a levágás mellett döntünk, akkor mely területek legyenek azok, amelyeket nem fogunk megjeleníteni.
A méretarány megtartásáról és az igazításról az svg elem preserveAspectRatio attribútuma beállításával gondoskodhatunk.
Az attribútum értéke két részből tevődik össze. Egyrészt rendelkeznünk kell arról, hogy a rajzlaphoz képest hogyan igazítjuk a képet, másrészt arról, hogy a fentiekben felsorolt három módszer melyikét szeretnénk alkalmazni. Az igazítást leíró rész négy szórészletből tevődik össze:
x + Min/Mid/Max + Y + Min/Mid/Max.
Azaz mindig az x betűvel kezdődik, ezután következik a vízszintes tengely menti igazítást eldöntő hárombetűs jelölés. Ezt követi a nagy Y, majd a függőleges tengely menti igazítást meghatározó szórészlet következik. Így kilenc lehetőség adódhat az igazításra.
X irányban (vízszintesen) a Min a balra, a Mid a középre, a Max pedig a jobbra igazítást jelenti. Hasonlóan Y irányban (függőlegesen) a Min a fentre, a Mid a középre, a Max pedig az alulra igazítást jelenti.
Miután az igazításról döntöttünk hátra van még a kitöltésről való döntés. Ha azt szeretnénk, hogy a kép kitöltse a teljes rajzlapot, akkor a slice paramétert kell használnunk. Ha a kép lekicsinyítése és így üres helyek hagyása mellett döntünk, akkor a meet paramétert kell használni. Ha azt szeretnénk, hogy a kép teljesen kitöltse a rajzlapot és minden része látható legyen, akkor pedig a none paramétert kell használnunk, ekkor azonban torzulhat az ábra.
A preserveAspectRatio attribútum értéke ezekből a részekből tevődik össze. Az igazítás módja után egy szóközzel elválasztva kell megadni a meet vagy a slice paramétert. Ha nem adunk meg semmilyen paramétert, akkor a meet beállításnak megfelelő eredményt kapunk. Ha a none paramétert szeretnénk használni, akkor igazítást nem kell megadnunk. Minden más esetben az igazítás megadása kötelező. Az attribútum elhagyása esetén az alapértelmezett érték lesz érvényben: xMidYMid meet. Azaz az ábra a rajzlap közepén fog megjelenni úgy, hogy az eredeti méretarányokat megtartva, a lehető legjobban kitöltse a rendelkezésre álló területet, de ne lógjon le a rajzlapról.
Az egyes beállítások eredményét egy interaktív ábrán is tanulmányozhatod, melyet az alábbi linkre kattintva érhetsz el: preserveaspectratio.html
Az ábrán két beágyazott kép helyezkedik el, mindkettőn egy kör látható egy négyzeten elhelyezve. A koordinátarendszer mindkét esetben 100×100 egység méretű, a rajzlapok pedig 120×360 és 360×120 egység méretűek. A legördülő menüben lehet beállítani a tulajdonságokat, melyeket az "Eredmény megjelenítése" gombra kattintva lehet megnézni az ábrán.
6/3. feladat:
Készíts egy 500×300 pixeles rajzlapot. Ágyazz bele három 100×200-as kisebb rajzlapot egymás mellé, a lapok közt némi üres hely kihagyásával. Ezeknek a kisebb rajzlapoknak a tartalma azonos legyen. Az alkalmazott koordinátarendszer a (0,0) ponttól a (100,100) pontig tartson. A képen helyezz el egy piros kört, melynek a sugara 50 egység, középpontja pedig az (50,50) pontban van. A rajzot igazítsd vízszintesen háromféle módon, a slice paramétert használva.
6/4. feladat:
Az előző feladat megoldását módosítsd úgy, hogy a függőleges igazítást változtatod és a meet paramétert használod.
A fentieken kívül fontos tudni, hogy minden alakzat rendelkezik saját koordinátarendszerrel. Ha másként nem rendelkezünk, akkor ezek a koordinátarendszerek mindenben megegyeznek a rajzlapon használttal. Alakzatok transzformálásakor azonban megváltozik ez a koordinátarendszer és ennek eredményeképpen az alakzat helyzete, esetleg formája is. Ezekről később, a "Transzformációk" fejezetben lesz szó.
A koordinátarendszerekkel és méretezéssel kapcsolatosan még egy fontos fogalomra van szükségünk. Ez a befoglaló téglalap. Minden alakzatnak van egy befoglaló téglalapja, ez az őt tartalmazó téglalapok közül a legkisebb. Ennek oldalai párhuzamosak a tengelyekkel. Sok esetben szükségünk van arra, hogy eldöntsük, egy értéket a rajzlap koordinátarendszere szerint adunk meg, vagy a befoglaló téglalapot használva. Ez utóbbi esetben a mértékegység mindig százalék és a bal felső sarokban van a (0%,0%) pont, a jobb alsóban az (100%,100%).