Mivel az SVG főleg webes megjelenítésre alkalmas formátum, lehetőség van arra is, hogy a dokumentumban linket helyezzünk el. Ezen kívül egy SVG kép beágyazható egy HTML oldalba is. Ebben a fejezetben ennek a lehetőségeiről lesz szó.
Az elkészült ábrákon könnyen helyezhetünk el linkeket. Tetszőleges területet érzékennyé lehet tenni. Hasonló eredményt tudunk elérni, mintha egy kliens oldali térképet készítenénk el a HTML kódban.
Hivatkozások létrehozására az <a> elem szolgál:
| <a | xlink:href= | "" | |
| xlink:title= | "" | ||
| xlink:show= | "" | ||
| target= | "" | /> |
Az egyes attribútumok az alábbiakat jelentik:
| xlink:href | A link célja, az a weboldal vagy fájl, amit meg kell nyitni. |
| xlink:title | Rövid leírás a linkről. |
| xlink:show | A link új ablakban nyíljon meg, vagy az aktuálisban |
| target | Annak az ablaknak vagy keretnek a neve, amiben meg kell nyitni a fájl. |
Ahogyan az előtagokból is látszik, a linkek használatához az attribútumok az xlink névtérből valók. Emiatt is szükséges az xlink névtér megadása a dokumentum gyökérelemében. Az attribútumok között kettő igényel még némi magyarázatot. Az xlink:show attribútum két értéket vehet fel. Ha new-ra állítjuk, akkor a linket a böngésző egy új ablakban nyitja meg. Ha az aktuális ablakban szeretnénk megnyitni a linket, akkor a replace beállítást kell használni. Ha másik ablakban vagy keretben szeretnénk megnyitni egy linket, akkor kell használni a target attribútumot.
Ha egy vagy több objektumot linkké szeretnénk alakítani, akkor nincs más dolgunk, mint körülvenni a kérdéses elemeket egy <a> elemmel.
Sajnos az SVGView csak az xlink:href attribútumot tudja helyesen kezelni. SVGView használatakor a link megnyitását új ablakban úgy lehet elérni, hogy a linkként viselkedő alakzaton az egér jobb gombjával kattintva az Open in New Window opciót választjuk. A linkek helyes megjelenítése és működése a Mozilla Firefox-ban is lehetséges, 1.5-ös verziótól.
19/1. feladat:
Készíts egy rajzlap közepére egy 50 egység sugarú kört. A kör legyen egy link, ami az ELTE honlapjára mutat.
Az SVG képek HTML oldalakon való elhelyezésére a legjobb módszer a nem szabványos <embed> elem használata:
| <embed | src= | "" | |
| width= | "" | ||
| height= | "" | ||
| type= | "image/svg+xml" | /> |
Az egyes attribútumok jelentése a következő
| src | a grafika forrása, a dokumentum elérési útvonala |
| width | a beágyazott kép szélessége |
| height | a beágyazott kép magassága |
| type | a beágyazott tartalom típusa, ami SVG dokumentumoknál a megadott image/svg+xml |
Bár ez az elem nem szabványos, a felhasználók többsége meg fogja tudni jeleníteni az ilyen módon beágyazott grafikákat. A böngészők fejlődésével pedig lehetőség lesz SVG és XHTML dokumentumok "kevert" módon történő megírására. Ekkor azonban névtereket kell használni.
19/2. feladat:
Az előző ábrát helyezd el egy egyszerű HTML oldalon, aminek a címe legyen "SVG link". Adj meg háttérszín is a dokumentumnak.
A példában szereplő HTML oldal csak a legszükségesebb összetevőket tartalmazza, amik a megoldáshoz szükségesek.