Az alábbi megadás a 3/4. ill. 3/5. feladatban szereplő sokszöggel egyenértékű eredményre vezet:<path d="M 48,16 L 16,96 L 96,48 L 0,48 L 80,96"/>
Eddigi ismereteink segítségével számos változatos alakzat elkészíthető. Gyakorta találkozhatunk viszont olyan ábrákkal, amelyek megrajzolása nem oldható meg alapvető geometriai alakzatok és egyenes vonalak használatával. Ebben az esetben nyúlhatunk az SVG egyik legrugalmasabb eszközéhez, a <path> elemhez. Segítségével szinte tetszőleges görbe megrajzolható és az elkészült alakzatok ugyanúgy viselkednek, mint az eddig megismertek: megadható a színük, a vonalaik stílusa és minden már megismert tulajdonság igaz marad görbékre is. Tulajdonképpen az eddigi alakzatok a <path> elem egyszerűsített változatai, vagyis minden elem megrajzolható görbeként is. Ennek ellenére ahol csak lehet, a rövidebb alakokat érdemes használni.
A <path> rugalmassága abból adódik, hogy segítségével többféle vonaltípus kapcsolható egymáshoz:
Mindezt úgy tehetjük meg, hogy egyszerűen felsoroljuk az egyes elemeket megfelelő számú paraméterrel ellátva.
A görbe leírására a d attribútum szolgál. Ebben az attribútumban betűk és számok szerepelhetnek, melyek leírják a görbék viselkedését. Minden részlet egy egybetűs utasítással kezdődik, majd az utasítástól függően 0-7 - kivételes esetekben még több - számérték következik, melyek pontosan leírják a görbét. Minden esetben használhatunk abszolút és relatív koordinátákat, azaz megadhatjuk, hogy a rajzlapon bármely pontból kiindulva hol helyezkedjen el az új rész, ill. felhasználhatjuk a "toll" aktuális helyzetét is kiindulópontként a távolságok megadásához. A nagybetűs írásmód mindig abszolút hivatkozást jelent, a kisbetűs pedig - ahol van értelme - relatív hivatkozást.
Írásunkat rövidíthetjük azzal, hogy a felesleges szóközöket elhagyjuk. Ezek az alábbi helyeken állhatnak:
A rövidítési lehetőségek adottak, azonban nem mindig érdemes használni őket, mert a kód könnyen áttekinthetetlenné válhat tőlük.
A fejezetben leírt görbetípusok egymással szabadon kombinálhatóak. Tulajdonképpen egy utasítássort definiálunk, amelyen végighalad a megjelenítő és a megfelelő íveket, szakaszokat kirajzolja. Összesen annyi dolgunk van, hogy minden egyes egyszavas utasítás után a neki megfelelő darabszámú paramétert adunk meg. Az, hogy az egyes utasítások egyenes szakaszt vagy egy Bézier-görbét határoznak-e meg, már nem számít. Néhány kivételtől eltekintve az egymás utáni részletek nincsenek egymásra hatással. Csak több egymás utáni Bézier-görbe kirajzolásakor támaszkodhatunk már megrajzolt részekre. Erről a fejezet utolsó részében lesz szó.
Egyenes szakaszokat néhány alapvető utasítással rajzolhatunk. Ezek a moveto, a lineto és a closepath. Jelentésük az alábbi (az egybetűs utasítások is láthatók a táblázatban):
| moveto - M ill. m | A "toll" áthelyezése a megadott pontba, vonal rajzolása nélkül. |
| lineto - L ill. l | Vonal rajzolása az aktuális pont - előző szakasz vége - és a megadott pont között. |
| closepath - Z ill. z | Görbe lezárása - az aktuális pont és a kezdőpont összekötése. |
Az M és az L utasításokat követően egy pont x és y koordinátáját kell megadni, míg a Z után nem áll semmi, vagy olyan utasítás követi, ami egy újabb görbét rajzoltat meg. A Z és a z utasítás között nincs különbség. Ha a görbe első utasítása m, akkor az utána következő pontmegadás abszolút koordinátákat fog jelenteni. Az egyes értékeket szóközökkel vagy vesszőkkel kell elválasztani. A kezdőpont nincs definiálva, ezért a görbék megadását egy moveto utasítással kell kezdeni, ami a kiindulópontba helyezi át a "tollat".
Az alábbi megadás a 3/4. ill. 3/5. feladatban szereplő sokszöggel egyenértékű eredményre vezet:
<path d="M 48,16 L 16,96 L 96,48 L 0,48 L 80,96"/>
Fontos megjegyezni, hogy a megjelenítés során <path> elemben megadott görbe is síkidomként fog viselkedni. Azaz ha másként nem rendelkezünk, akkor a körvonala színtelen, míg a belseje fekete színű lesz.
9/1. feladat:
Készíts egy egyszerű házikót szakaszok segítségével. (Ne töröttvonalat használj!)
A bevezetőben említetteken kívül az egyenes szakaszok rajzolásánál is számos eszközzel rövidítetünk a leírt kódon. Azokban az esetekben, amikor csak vízszintesen vagy függőlegesen kell elmozdulni (mint pl. az előző házikó falainak megrajzolásakor) az egyik koordináta megadása felesleges, hiszen úgyis megegyezik az aktuálissal. Ilyenkor vízszintes vonal rajzolásához a H ill. h utasításokat használhatjuk. Ekkor paraméterként a új vízszintes irányú koordinátát ill. relatív koordináták esetén az elmozdulást kell megadni. Hasonlóan működik függőleges irányban a V ill. v utasítás.
Ezen kívül a lineto bármelyik alakja után tetszőlegesen sok koordinátapár felsorolható. Az előbb említett - a csillagot megrajzoló - példa rövid alakja lehet például az alábbi:
<path d="M 48,16 L 16,96 96,48 0,48 80,96"/>
9/2. feladat:
Készítsd el az előző házikó leírásának lehető legrövidebb kódját.
Bár ez utóbbi kód valóban jóval rövidebb, mint az eredeti, már egy ekkora rajz esetén is meglehetősen rontja a kód olvashatóságát. Természetesen a felhasználási célok döntik el, hogy milyen módon célszerű megadni a görbék leírását.
Az alábbiakban azzal fogunk megismerkedni, hogy hogyan illeszthetünk be egy ellipszisívet tetszőleges görbébe. Ez az egyik legegyszerűbb ívtípus, mégis a legtöbb adatra van szükség a leírásához. A kiindulóponton kívül még hét adat szükséges a pontos megadáshoz. Mint az egyenes szakaszoknál is láttuk, minden utasítás alapul veszi a "toll" aktuális helyzetét, ez most sem lesz másként.
Ellipszisív rajzolásához az arc angol szó első betűjét az A vagy az a utasítást használhatjuk. Az utasítást hét adat követi:
Ez a megadási mód első ránézésre kicsit bonyolultnak tűnhet. Látni fogjuk azonban, hogy a pontos meghatározáshoz minden adat feltétlenül szükséges.
Először azt az ellipszist kell megadni, amelyiknek egy ívét ki szeretnénk rajzolni a kezdő és a végpont között. Biztosan kell hozzá a két sugár. Semmi nem garantálja azonban, hogy ezek a sugarak vízszintesen helyezkednek el. Előfordulhat, hogy egy másmilyen ív kirajzolására van szükségünk, például, amikor egy bolygó köré rajzolunk meg egy gyűrűit. Ezért meg kell adnunk azt is, hogy a vízszintes tengelyhez képest az ellipszis x tengelye mekkora szöggel van elforgatva. Ezzel - általános esetben - két olyan ellipszist határozunk meg, amely átmegy az ív két végpontján és sugara, ill. állása megfelelő. Ennek a két ellipszisívnek négy része van, amelyek között döntenünk kell. Ezeket a lehetőségeket a jobboldali ábra mutatja.
A két 0 vagy 1 értékű adat dönti el, hogy ezek közül végül melyik kerül kirajzolásra. Az első segítségével azt adhatjuk meg, hogy az ellipszisnek azt az ívét rajzoljuk-e ki, amelyik nagyobb 180 foknál, vagy azt, amelyik kisebb. Ha a 180 foknál kisebb ívet szeretnénk kirajzolni, akkor 0-et kell írni, ha pedig a nagyobbat, akkor 1-t. A maradék két ív között pedig az dönt, hogy a kezdőponttól a végpont felé haladva az óramutató járásával egyező irányban mozgunk-e, vagy ellentétesen. Ha a végpont a kirajzolandó íven az óramutató járásával megegyező irányban helyezkedik el, akkor 0-t kell írni, egyébként 1-et.
Az ábrán az ív az A ponttól a B felé tart, a négyféle lehetőség az alábbi beállításokhoz tartozik:
| Szín | Méretjelölő | Körüljárási irány |
| Zöld | 0 | 0 |
| Kék | 0 | 1 |
| Piros | 1 | 0 |
| Narancssárga | 1 | 1 |
9/3. feladat:
Készíts egy lekerekített sarkú piros téglalapot görbe segítségével.
9/4. feladat:
Készítsd el ellipszisívek segítségével a baloldali ábrát.
Segítségül: az alap egy világoskék ellipszis, amin a sötétkék rész három ív segítségével írható le. A két pötty egy-egy kör segítségével készült. A kisebb ellipszisek sugara mindkét irányban a nagy ellipszis sugarának fele.
Ezek a görbék sokak számára ismerősek lehetnek a különböző rajzolóprogramokból. Ezek azok a görbék, amelyeket általában úgy tudunk megrajzolni, hogy a két végpont kijelölése után "elhúzzuk" a görbét, azaz az egyenes szakaszból valamilyen íves alakzatot készítünk. Sokak számára a görbék viselkedése a kiszámíthatatlan tulajdonsággal jellemezhető legjobban. Ez korántsem így van, néhány vonal berajzolása segíthet elképzelni az eredményt. SVG-ben másod- és harmadfokú görbéket tudunk kirajzoltatni. A matematikában ismeretesek magasabb fokú görbék is, ezek tárgyalásával most nem foglalkozunk.
Ezek a görbék nagyon egyszerűen elkészíthetők. Összesen három pontra van szükségünk a felrajzolásukhoz. Ismerni kell a kezdő- és a végpontot, ill. egy ún. vezérlőpontot, amitől a görbe tulajdonképpeni alakja függeni fog. A jobboldali ábrán a kezdőpont A, a végpont B, a vezérlőpont pedig V betűvel van jelölve.
A görbe kirajzolása a következőképpen zajlik:
Ezt az eljárást folytatva az ábrán pirossal megrajzolt görbéhez jutunk.
Ahhoz, hogy egy ilyen görbét SVG-ben is képesek legyünk megrajzolni kevés adatot kell megadni. Tulajdonképpen azt a három pontot kell ismernünk, amiből a fenti algoritmus kiindul. A kezdőpont ismét a görbe előző szakaszának végpontja, vagy egy olyan pont, ahova a "tollat" egy moveto utasítással vittük. A görbe megadása a Q vagy q betűvel történik. Ez az angol quadratic szó rövidítése. Ezután négy szám következik. Az első kettő a vezérlőpont két koordinátája, amelyet a végpont helye követ. Ezzel el is készült egy görbe. Ha több másodfokú görbét szeretnénk egymás után rajzolni, akkor újabb utasítás nélkül adhatjuk meg a következő görberész vezérlőpontját és végpontját.
9/5. feladat:
Készíts egy 400×400-as rajzlapot. Rajzolj rá két másodfokú Bézier-görbét. Az első a (10,180) pontból induljon és a végpontja a (180,260) pontban legyen. Vezérlőpontjána koordinátái pedig (70,120). A másik görbe ennek folytatása legyen a (320,230) pontba, (500,110) vezérlőponttal. A görbe legyen kék színű és szaggatott.
A feladat megoldásában jól látszik, hogy a két görbe csúcsosan találkozik. Vannak olyan esetek, amikor ettől meg szeretnénk szabadulni és szép, ívelt csatlakozást létrehozni két görbe között. Ezt ún. simított görbe rajzolásával érhetjük el, melyet a T vagy t parancs kiadásával tudunk megrajzolni. Egy ilyen görbe sokkal kisebb szabadságot biztosít a rajzoló számára, ugyanis csak a végpontot adhatjuk meg. Az íves csatlakozás érdekében a vezérlőpont automatikusan kerül kiszámításra, mégpedig úgy, hogy az első görbe vezérlőpontját megtükrözzük a végpontjára. Az így kapott eredmény lesz a második ív vezérlőpontja. Tehát ezt a görbét csak úgy érdemes használni, hogy egy másik Bézier-görbe folytatásaként írjuk fel. Ellenkező esetben csak egy egyenes szakasz lesz a végeredmény, azt pedig egyszerűbben is elérhetjük. Tehát simított másodfokú görbénél csak a végpont két koordinátája követi az utasítást.
9/6. feladat:
Egészítsd ki az előző feladat megoldását egy olyan görbével, amelynek második ívét simított módon rajzolod meg. A görbe többi adata egyezzen meg az előző adataival, színe pedig legyen sárga.
Ezek a görbék a másodfokúaktól abban térnek el, hogy két vezérlőponttal rendelkeznek. Emiatt sokkal rugalmasabbak, nagyobb formaválasztékkal rendelkeznek. Segítségükkel nagyon változatos ívek rajzolhatók.
A megadásuk a cubic angol szó kezdőbetűjével történik, azaz a C vagy c parancs segítségével. Összesen hat értéket kell megadnunk. Sorrendben a kezdőponthoz tartozó vezérlőpont, a végponthoz tartozó vezérlőpont, majd a végpont két-két koordinátája a szükséges adatok. A jobboldali ábrán a kezdőpont A, a végpont B betűvel van jelezve. V1 a kezdőponthoz tartozó vezérlőpont és V2 a végponthoz tartozó vezérlőpont.
A görbe kirajzolása a következőképpen zajlik:
Eredményül a zölddel rajzolt görbéhez jutunk
Több harmadfokú görbe egymás után rajzolásakor sem kell újra és újra megadni a parancsot, egyszerűen elegendő csak a szükséges mennyiségű paraméter megadása.
9/7. feladat:
Készíts harmadfokú Bézier-görbéket az alábbi adatok szerint:
Kezdőpont
Végpont
Kezdőponthoz tartozó vezérlőpont
Végponthoz tartozó vezérlőpont
Szín
30,60
120,60
30,30
123,30
lila
180,60
270,60
205,30
295,30
kék
30,150
120,150
120,110
30,110
narancssárga
180,150
270,150
180,105
270,195
piros
30,240
120,240
180,200
0,200
zöld
180,240
270,240
260,200
190,280
fekete
Harmadfokú Bézier-görbéknél is készíthetünk simított változatot. Ilyenkor a kezdőponthoz tartozó vezérlőpontot nem kell megadni, mert azt automatikusan kiszámolja a megjelenítő. Ez a pont az előző vezérlőpont tükörképe lesz. Ehhez a S ill. s parancsokat kell használni. Ilyenkor négy érték szükséges, a végponthoz tartozó vezérlőpont koordinátái ill. a végpont. A kezdőpont az aktuális pont, a hozzá tartozó vezérlőpont pedig az előző tükörképe lesz.
Mint azt a másod- és harmadfokú görbéknél is láttuk, egymás után több görbét is készíthetünk, összefűzhetjük őket akár felsorolással, akár úgy is, hogy a vezérlőpontokat a megjelenítő segítségével számoltatjuk ki.
Annak sincs semmi akadálya, hogy nem azonos fokszámú görbéket helyezzünk el egymás után. Ez a tulajdonság nem túl meglepő, hiszen szabadon kombinálható elemeket ismertünk meg ebben a fejezetben, így már találkoztunk olyan helyzettel is, hogy egy lezárt görbe után egy másikat helyezünk el ugyanabban a <path> elemben. Egy fontos részlet azonban nem teljesen egyértelmű. Ez a vezérlőpont kérdése simított görbék esetén. Nyugodtan megtehetjük, hogy egy másodfokú görbe után egy harmadfokút rajzolunk ki úgy, hogy a simított változatot választjuk. A megjelenítő ilyenkor is helyesen jár el, mindig az utolsó vezérlőpontot tükrözi meg, és ezt az információt használja fel a továbbrajzoláshoz.
Ez azt jelenti, hogy a megismert Bézier-görbék egymással - és az összes többi görbetípussal is - szabadon kombinálhatóak, fokszámuktól függetlenül.