Mint a bevezetőben olvashattuk, az SVG kép egy XML alkalmazás, azaz XML-t használ a képek leírásához. Ahhoz, hogy létre tudjunk hozni SVG-vel képeket, mindössze néhány szabályt kell betartanunk. Ebben a fejezetben az SVG dokumentumok felépítéséről lesz szó. Azok számára, akik rendelkeznek XML ismeretekkel, ez a bevezető elég lesz a továbblépéshez. A többieknek javaslom az "XML alapismeretek" című fejezet elolvasását.
Most lássuk, hogyan is néz ki egy SVG dokumentum!
Mint minden érvényes XML dokumentumnál, az első sorban a használt verziót és a betűkészletet adhatjuk meg. Ha például a dokumentumunkban elhelyezett szövegben az UTF-8 karakterkészletet szeretnénk használni, akkor az alábbi deklarációval kezdjük a dokumentumot:
<?xml version="1.0" encoding="UTF-8"?>
Ezzel tájékoztatjuk a böngészőt, hogy egy olyan XML dokumentumot fogunk készíteni, mely az 1.0-s szabványnak felel meg és az UTF-8 betűkészletet használja. A betűkészlet megadása elhagyható, de ha UTF-8 kódolást állítunk be, akkor a mentésnél is ezt a formát kell választani.
A megjelenítés során a böngésző ellenőrzi, hogy a dokumentumunk érvényes-e, azaz megfelel-e az SVG-hez tartozó DTD (dokumentumtípus-deklaráció) előírásainak. Hogy a böngésző ezt meg tudja tenni, meg kell adnunk a leírás helyét. Jelenleg az SVG 1.1-es verziója használatos, az ehhez tartozó DTD-t a következő módon kell megadni:
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
A DTD megadása elhagyható.
Ezzel a néhány sorral el is készült a dokumentum fejléce. A további részek alkotják a képet, vagyis a dokumentum törzsét.
A gyökérelem egy <svg> elem. Ebben az elemben adhatjuk meg azokat a névtereket, amelyeket használni szeretnénk. Egy SVG dokumentum elkészítéséhez két névtér használata lehet szükséges: svg és xlink
Ezek közül az alapértelmezett névtér természetesen az svg. Az ebben szereplő elemek így megkülönböztető előtag nélkül használhatók. Ezen kívül a dokumentumon belüli hivatkozásokhoz szükséges lehet az xlink használata is. A gyökérelemben a névtereket az alábbiak szerint adjuk meg:
| <svg | xmlns= | "http://www.w3.org/2000/svg" | |
| xmlns:xlink= | "http://www.w3.org/1999/xlink" | > |
A gyökérelemben ezeken kívül még három adat elhelyezése célszerű ill. szükséges:
Ezek beállítására az alábbi attribútumok szolgálnak:
| version | verzió megadása (jelenleg 1.1) |
| width | a rajzlap szélessége |
| height | a rajzlap magassága |
A méretek megadáshoz sokféle mértékegységet használhatunk és további attribútumok segítségével már a rajzterület kijelölésekor sok eszköz áll rendelkezésünkre. Ezekről a lehetőségekről bővebben a Koordinátarendszerek c. fejezetben lesz szó. Legegyszerűbb megadási mód, ha egyszerű számértékeket használunk, ilyenkor a rajzlap méretét pixelekben állíthatjuk be. Hogy alakzatainkat el tudjuk helyezni, egy koordinátarendszerben elfoglalt helyüket kell megadnunk. A most ismertetett módszer egy olyan koordinátarendszert hoz létre, ami tisztán geometriai, azaz a pontoknak és a rácsvonalaknak nincsen kiterjedésük. A koordinátarendszer vízszintes (x) tengelye jobbra mutat, a függőleges (y) tengely - az általában megszokottal ellentétesen - lefelé mutat. Az origó a rajzlap bal felső sarkában helyezkedik el.
A dokumentum törzse fogja tartalmazni a kép leírását, majd a végére kerül a gyökérelem lezáró párja: </svg>.
A rajzon kívül elhelyezhetünk néhány egyéb információt is a dokumentumban. Adhatunk meg címet, amely a böngésző címsorában fog szerepelni. A cím helye már a gyökérelem belsejében van, vagyis a nyitó és a lezáró <svg> elemek között. Ennek formája a következő:
<title>Ide kerülhet a cím.</title>
Minden további - az alakzatokat és kinézetüket leíró - elemet a gyökérelem belsejében helyezünk el. Ezek többsége üres elem lesz, azaz szöveges adatot nem fog tartalmazni. A rajz kinézetét az elemekben beállított attribútumok értéke fogja meghatározni. Ettől leggyakrabban bonyolultabb színezések és mintázatok használatakor, vagy animációk készítésekor kell eltérni. Természetesen máskor is használható külön a nyitó és külön a lezáró kódelem, ám ez csak a forrás méretének növekedését eredményezi. Ezért - amikor csak lehet - célszerű az üres elemek és az attribútumok használata.
Az alábbi gombra kattintva egy alap SVG dokumentumot találsz, amely az alábbi beállításokat tartalmazza:
Az első néhány fejezetben, ha más utalással nem találkozol, akkor a példa szerinti rajzlapon dolgozz! Így biztos, hogy azok az alakzatok, melyeket egy-egy feladat szövege meghatároz, elférnek ezen a rajzterületen.
Bár az XML dokumentumok megjegyzéseiben elméletileg előfordulhatnak ékezetes betűk, nem ajánlott a használatuk. Számos esetben okoznak problémát a megjelenítő számára és gyakran teljesen meggátolják a megjegyzés után elhelyezett alakzatok megjelenítését.