SVGkontekstissa

SVGkontekstissa viitataan SVG-grafiikan tulkintatilaan, jossa piirrosta rakennetaan ja renderöidään. Konteksti kattaa sekä koordinaatistot että tyylin ja resurssien tilan, jotka vaikuttavat siihen, miten elementit piirretään, mitkä alueet ovat näkyviä ja miten skaalautuvuus toteutetaan.

Jokaisella SVG-elemellä on oma käyttäjäkoordinaattijärjestelmänsä, ja sisäiset transformit rakentavat sen nykyistä piirtopintaan nähden. Ylin konteksti määritellään SVG-asiakkaan näkymällä (viewport) ja sen sisäistä suoritusmenetelmää kutsutaan usein koordinaattien muunnokseksi. ViewBox määrittää, miten käyttäjäkoordinaatit skaalautuvat näytölle. Gradienttien ja kuvioiden tapauksessa gradientUnits- tai patternUnits-arvot voivat olla userSpaceOnUse tai objectBoundingBox, mikä vaikuttaa siihen, miten väriarvot skaalautuvat.

Tyylit voivat olla CSS:llä tai esityssisältöihin liittyen määritettyjä, ja monet ominaisuudet periytyvät elementtien välillä. Esimerkkejä ovat fill, stroke, opacity sekä fontti. CurrentColor-ominaisuus hyödyntää periytyvää väriä, jolloin väriä voidaan ohjata vanhemman elementin kautta.

Ryhmät (<g>) kokoavat useita elementtejä yhteen ja mahdollistavat yhteisten transformaatioiden tai tyylien soveltamisen. Piirtämisen järjestys, läpinäkyvyys ja kärjet sekä clipPathin ja maskin käyttö määrittävät renderöintikon tekstit käytännössä. Renderöintikontekstiin vaikuttavat myös määritteet kuten viewBox, preserveAspectRatio sekä koordinaattien muunnosketjut.

Käytännössä kontekstin ymmärtäminen helpottaa paikoittelua, responsiivista suunnittelua ja skaalaamista erilaisilla näyttökooilla. Oikea viewBoxin ja preserveAspectRatio’n asetus varmistaa, että grafiikka säilyttää suhteensa eri kokoisilla alustoilla.