Az SVG rajz segítségével több alakzat is létrehozható. Az SVG-rajz hét alakzatot használhat és kombinálhat: Útvonal, Téglalap, Kör, Ellipszis, Vonal, Vonallánc és Sokszög.
Pálya
Az pathelem a leggyakrabban látható, és általában SVG-kód exportálására tervezett programok generálják.
A pathfenti példa egy „plusz” szimbólumot (+) generál, ha SVG rajzon belül használjuk. Az SVG pathelemeket nem manuálisan építik, hanem olyan tervezőprogramokon keresztül generálják, amelyek képesek kezelni a vektorgrafikákat, például az Illustrator vagy az Inkscape.
Téglalap
A téglalap elem téglalapot rectrajzol a képernyőn, és hat attribútumot fogad el.
xés yrendelje hozzá a téglalap bal felső sarkának helyzetét, widthés heightrendelje hozzá a téglalap méretét. rxés ryrendelje hozzá a téglalap sarkainak sugarát, hasonlóan a CSS border-radius tulajdonsághoz.
Kör
A kör elem circlehárom attribútumot fogad el.
cxés cyrendelje hozzá a kör középpontjának helyzetét, és rendelje hozzá a kör rsugarát (méretét).
Ellipszis
Az ellipszis elem,, ellipsehasonló az circleelemhez, azzal a különbséggel, hogy a sugár két tulajdonságra oszlik.
Ismét, cxés cyhozzá a középpontjának helyzetét az ellipszis, és most rxés ryhozzárendelni a vízszintes és függőleges sugara az ellipszis, ill. Egy nagyobb rx„kövér” ellipszist, egy nagyobb pedig ryegy soványabb ellipszist ad. Ha rxés ryegyenlő, akkor kört képez.
Vonal
Az lineelem egyszerű, és négy attribútumot fogad el.
A x1és y1attribútumok hozzá az első pont a vonal, valamint a x2és y2attribútumok hozzá a második pont a vonal.
Vonallánc
A polylineösszekapcsolt egyenesek sora, egyetlen attribútumban hozzárendelve.
Az pointsattribútum hozzárendeli a pontok listáját, minden pontot vesszővel elválasztva.
Poligon
Az polygonelem összekapcsolt egyenesek sora is, de ebben az esetben az utolsó vonal automatikusan újra csatlakozik a kezdeti ponthoz.
Ez a példa ugyanazt az alakzatot fogja rajzolni, mint a polylinefentiek, de extra vonalat rajzol a sorok „lezárására”.
Több információ
MDN dokumentáció: MDN