A főbb adatok svg, mdn
A legtöbb SVG rajzban több alapvető alak is létezik. Ezeknek a számoknak a célja nyilvánvaló a nevükből. Adtunk itt néhány attribútumot, amelyek meghatározzák a pozíciót és a méretet, de az elemek specifikációja valószínűleg tartalmaz egy pontosabb és teljes leírást, valamint az itt nem ismertetett tulajdonságokat. Mivel azonban a legtöbb SVG dokumentumban használják őket, fontos, hogy legyen némi ötletük.
Alap formák
Formanyomtatvány beillesztéséhez létre kell hoznia egy elemet a dokumentumban. A különböző elemek különböző formáknak felelnek meg, és különböző attribútumokat igényelnek ezen formák méretének és pozíciójának leírására. Egyesek egy kicsit nehézkesek, mivel más formában is létrehozhatók, de a kényelemért mindannyian szerepelnek itt, és segítenek az SVG dokumentumok rövid és olvashatóbb megőrzésében. A fő formák a jobb oldali képen jelennek meg. A létrehozandó kód valami ilyesmit lát:
Megjegyzés: A stroke attribútumai. a lökethossz és a kitöltés az alábbi kézikönyvben található meg.
téglalapok
A tiszta elem pontosan azt teszi, amit elvár, azaz rajzol egy téglalapot a képernyőn. Csak 6 alap attribútum van, amely szabályozza a téglalap helyzetét és alakját a képernyőn. Az előzőleg megjelenített képen két, egy kicsit felesleges megjelenésű elem látható. Az egyik a jobb oldalon rx és ry tulajdonságokkal rendelkezik, amelyek a lekerekített sarkokért felelősek. Ha ez a készlet nincs jelen, akkor alapértelmezés szerint 0-ra van állítva.
x A téglalap bal felső sarkának x pozíciója. y A téglalap bal felső sarkának y pozíciója. szélesség téglalap szélesség magasság téglalap magasság rx sugár x téglalap sarkai y téglalap sarkának y sugara
kör
Amint várható, a körelem körön rajzol a képernyőn. Ennek az elemnek a leírásához 3 attribútum található.
r A kör sugara. cx A kör közepének x-pozíciója. cy A kör közepének y pozíciója.
Az ellipszis egy kör elemének leggyakoribb formája, amelyben külön-külön skálázhatja a kör x és y sugarait (a matematikusok általában a fő tengely felét és a mellék tengely felét).
rx Az ellipszis x sugara. ry Az ellipszis y sugara. cx Az ellipszis középpontjának x-pozíciója. cy Az ellipszis középpontjának y helyzete.
A vonal egyszerű egyenes vonalat képvisel. Tulajdonságai két pontot jelentenek, amelyek meghatározzák a vonal kezdő- és végpontjait.
x1 Az 1. pont x helyzete y1 Az 1. pont y pozíciója x2 A 2. pont x helyzete. y2 A 2. pont y pozíciója.
Broken Line
A vonallánc elem a csatolt egyenes vonalak csoportját játssza le. Mivel ez a lista elég hosszú lehet, az összes pont egy attribútumban szerepel:
pontok A pontok listája, mindegyik szóközzel, vesszővel, EOL-val elválasztva. vagy egy újsor karakter. Minden pontnak két számot, egy x koordinátát és egy koordinátát kell tartalmaznia. Ezért a (0,0), (1,1) és (2,2) listák írhatók: "0 0, 1 1, 2 2".
sokszög
A sokszögelem nagyon hasonlít a políline elemhez, mivel azok a pontok listáját összekötő egyenes vonalszakaszokból vannak kialakítva. De a sokszögek esetében az útvonal automatikusan visszaáll az első pontra a végén, így zárt formát hoz létre. Meg kell jegyezni, hogy a téglalap egy adott eset egy poligon, így sokszög használható elem létrehozására
pontok A pontok listája, mindegyik szóközzel, vesszővel, EOL-val elválasztva. vagy egy újsor karakter. Minden pontnak két számot, egy x koordinátát és egy koordinátát kell tartalmaznia. Ezért a (0,0), (1,1) és (2,2) listák a következőképpen írhatók: "0 0, 1 1, 2 2". A sokszöget a végső egyenes vonal (2,2) és (0,0) között bezárja.
Path. valószínűleg a leggyakoribb formában, amelyet SVG-ben lehet használni. A pályaelem segítségével tetszőleges téglalapokat (lekerekített sarkokkal vagy anélkül), köröket, ellipsziseket, törött vonalakat és sokszögeket húzhat meg; és lényegében bármely más típusú forma: Bezier-görbék, négyzetes görbék és még sok más. Ezért az útvonalelemet külön tekintjük az útmutató következő részében, de most csak azt vesszük észre, hogy csak egy attribútuma van az alakjának szabályozására.
d Pontok listája és egyéb információk arról, hogyan lehet rajzolni. További információt a Path szakaszban talál.