Vektorinė grafika ir profesionalus skaitmeninis braižymas tiesiogiai jūsų interneto naršyklėje. Mastelio keitimui atspari vektorinė grafika (angl. Scalable Vector Graphics – SVG) yra šiuolaikinio interneto dizaino, vartotojo sąsajų (UI/UX) piktogramų, interaktyvių duomenų vizualizacijų bei kompiuterizuotos gamybos (CNC lazerinio graviravimo, plėvelių pjaustytuvų) pamatas. Skirtingai nuo rastrinių formatų (JPEG, PNG ar WebP), kurie saugo fiksuotą pikselių tinklelį, SVG dokumentas yra sudarytas iš matematinių formulių: taškų koordinačių, kreivių vektorių, kontūro parametrų ir spalvinių užpildų. Ši studija suteikia modernią, greitą ir saugią aplinką kurti daugiakomponentes vektorines kompozicijas, glotninti kreives naudojant Catmull-Rom algoritmą, interaktyviai valdyti taškus bei gauti švarų, gamybai paruoštą SVG kodą.

1. Vektorinės grafikos pagrindai ir SVG struktūra

SVG failas iš esmės yra XML dokumentas, atitinkantis oficialų W3C standartą. Kadangi formos aprašomos matematiškai, vektorinis piešinys pasižymi visiška nepriklausomybe nuo ekrano raiškos: jis išlieka nepriekaištingai aštrus tiek 16×16 pikselių dydžio naršyklės skirtuko piktogramoje (favicon), tiek milžiniškame lauko reklamos stende ar didelės raiškos „Retina“ ekranuose be menkiausio susiliejimo ar kokybės praradimo.

Pagrindinis sudėtingų vektorinių figūrų elementas yra <path>, kurio geometrinė forma apibrėžiama duomenų eilute d="...". Šioje eilutėje naudojamos standartinės komandos:

  • M x y (Move To): Perkelia virtualią plunksną į nurodytą koordinatę (x, y) nebrėždamas linijos.
  • L x y (Line To): Nubrėžia tiesią atkarpą nuo esamos padėties iki taško (x, y).
  • C cp1x cp1y, cp2x cp2y, x y (Cubic Bézier): Suformuoja tolygią kubinę Bezier kreivę, valdomą dviejų kontrolinių rankenėlių (cp1 ir cp2), ir užbaigia ją taške (x, y).
  • Z (Close Path): Automatiškai sujungia paskutinį tašką su pradiniu M tašku tiesia linija, sukuriant uždarą kontūrą, kurį galima užpildyti spalva ar gradientu.

2. Catmull-Rom į Cubic Bézier glotnių kreivių matematika

Braižant laisva ranka kompiuterio ekrane, rankinis kontrolinių Bezier rankenėlių dėliojimas kiekvienam taškui reikalauja daug laiko ir dažnai sukuria netolygius lūžius. Šiame įrankyje įdiegtas automatinis Catmull-Rom splaino konvertavimo į kubines Bezier kreives algoritmas su optimalia 1/6 įtampos (tension) konstanta.

Turint nuoseklią keturių taškų seką $P_0, P_1, P_2, P_3$, atkarpos tarp $P_1$ ir $P_2$ kontroliniai taškai apskaičiuojami pagal formules:

CP1 = P1 + (P2 - P0) / 6
CP2 = P2 - (P3 - P1) / 6

Ši matematinė išraiška užtikrina $C^1$ pirmosios išvestinės tolygumą per visus sujungimus. Kreivė tiksliai kerta visus vartotojo padėtus atskaitos taškus ir pasižymi natūraliu, organišku glotnumu be aštrių kampų ar dirbtinių iškraipymų.

3. Daugiakomponentis sluoksnių valdymas ir taškų redagavimas

Realūs grafikos darbai ir logotipai dažniausiai susideda iš kelių atskirų elementų (pavyzdžiui, raidės „i“ taškas ir kuolas, personažo detalės, kontūrai su skirtingais užpildais). TOOL GIGA studijoje integruotas intuityvus sluoksnių modulis:

  • Nepriklausomi figūrų sluoksniai: Kiekviena figūra turi atskirus kontūro storio (0–30 px), kontūro spalvos, užpildo spalvos ir kreivio tipo nustatymus.
  • Tiesioginis taškų tempimas drobėje: Bet kurį aktyvaus sluoksnio tašką galima sugriebti pele ar pirštu ir laisvai tempti į naują vietą – kreivė realiu laiku persibraižo.
  • Taško trynimas dešiniuoju klavišu: Paspaudus dešinį pelės mygtuką ant bet kurio taško, jis iškart pašalinamas, o likusi linija sklandžiai persijungia.
  • Greitas sluoksnio aktyvavimas: Spustelėjus ant bet kurios figūros piešimo lentoje, ji iškart tampa aktyvi redagavimui.

4. Tikslaus apkarpymo (Crop) ir viewBox normalizavimo inžinerija

Eksportuojant vektorines piktogramas interneto svetainėms ar aplikacijoms, pertekliniai tušti plotai aplink piešinį apsunkina lygiavimą. Mūsų sistemoje įdiegtas integruotas apkarpymo (Crop) variklis:

Pažymėjus norimą stačiakampį plotą, kurio plotis yra $W$, aukštis $H$, o viršutinis kairysis kampas yra $(X_{\text{crop}}, Y_{\text{crop}})$, sistema automatiškai transformuoja visų figūrų taškų koordinates:

X_naujas = X_senas - X_crop
Y_naujas = Y_senas - Y_crop

Pagrindinis SVG atributo viewBox nustatymas atnaujinamas į 0 0 W H, taip sugrąžinant piešinio pradžios tašką į $(0, 0)$. Galite pasirinkti greitus standartinius piktogramų dydžius (100×100, 200×200, 300×300, 500×500) arba įrašyti tikslius pikselius rankiniu būdu.

5. Saugus SVG failų importas ir validacija

Kadangi SVG yra XML tekstinis formatas, įkeliant trečiųjų šalių failus gali kilti saugumo grėsmių (XSS atakos per <script> ar <iframe>). Mūsų importavimo modulis atlieka griežtą kliento pusės patikrą ir geometrijos išskyrimą:

  • XML struktūros tikrinimas: Failas analizuojamas per naršyklės DOMParser; sugadinti failai atmetami su aiškiu perspėjimu.
  • Saugumo filtras: Visi potencialiai pavojingi elementai (skriptai, rėmeliai) yra automatiškai pašalinami.
  • Rastrinių ir vektorinių failų atskyrimas: Jei įkeltame SVG tėra įdėtas paprastas PNG/JPG paveikslėlis (<image>), sistema iškart informuoja, kad faile nėra vektorinių linijų.
  • Geometrijos išskleidimas: Standartinės SVG žymos (<path>, <rect>, <circle>, <polygon>, <line>) paverčiamos redaguojamais taškais ir sluoksniais.

6. Praktinis pritaikymas: Web UI, Cricut ir lazerinis graviravimas

Švari, optimizuota ir standartus atitinkanti vektorinė grafika yra pritaikoma įvairiose srityse:

  • Interneto svetainės ir programėlės: Švarus SVG kodas gali būti tiesiogiai įterpiamas į HTML, React, Vue ar Svelte komponentus be jokių papildomų HTTP užklausų.
  • Cricut ir Silhouette pjaustyklės: Tikslūs, uždari vektoriniai kontūrai garantuoja nepriekaištingą plėvelių, popieriaus ar kartono pjaustymą.
  • Lazerinis CNC graviravimas ir pjovimas: Geometrinės linijos su tiksliais storiais tiesiogiai importuojamos į „LightBurn“ ar „LaserGRBL“ programas.
  • Logotipų ir emblemų eskizavimas: Greitas idėjų generavimas ir spalvų derinimas su momentiniu atsisiuntimu.

7. Švarios vektorinės grafikos eksportavimo rekomendacijos

Norint pasiekti geriausią atvaizdavimo greitį ir failo kompaktiškumą:

  • Naudokite minimalų taškų skaičių: Glotnios kreivės leidžia aprašyti sudėtingas formas vos keliais taškais, todėl failo dydis lieka minimalus (dažnai vos 1–2 KB).
  • Užtikrinkite kontūro uždarumą: Jei figūrą planuojate dažyti pilna spalva, įsitikinkite, kad įjungta parinktis „Uždaras kontūras“.
  • Dvipusis redagavimas: Jei norite pakeisti tikslų parametrą, galite tiesiogiai redaguoti kodą teksto langelyje – drobė atsinaujins akimirksniu.

8. Vektoriaus ontologija: Pierre Bézier, Descartes ir skaitmeninio nemirtingumo paieškos

Žvelgiant iš istorinės perspektyvos, žmogaus bandymas užfiksuoti tobulą kreivę visuomet priminė savotišką kaktomušą su begalybe. Kol XVII a. Renė Dekartas (René Descartes) nesuvedė geometrijos į algebrines koordinates, o XX a. septintajame dešimtmetyje prancūzų inžinierius Pjeras Bezjė (Pierre Bézier), projektuodamas elegantiškus „Renault“ kėbulus, nepakeitė fizinių medinių šablonų (vadinamų splainais) elegantiškomis polinominėmis formulėmis, braižytojai buvo pasmerkti amžinai fizinės materijos trūkumų nelaisvei. Tačiau šiuolaikinis skaitmeninis pasaulis sugebėjo sukurti naują tragikomišką paradoksą: mes išdidžiai įkalinome realybę į baigtinių pikselių gardeles (rastrą), o po to ištisus dešimtmečius dejuojame prie monitorių, kodėl iš suspaustos 50×50 pikselių JPEG relikvijos neįmanoma atspausdinti ryškaus logotipo ant milžiniško greitkelio stendo.

Vektorinė grafika šioje skaitmeninėje entropijoje veikia kaip grynoji Platono idėjų (eidos) karalystė. Čia apskritimas nėra atsitiktinis spalvotų kvadratėlių samplėšis ar trapus palimpsestas, o transcendentinis matematinis dėsnis. Redaguodami SVG kodą ar tampydami kontrolinius Bezier taškus, jūs veikiate ne kaip paprastas skaitmeninis dažytojas, o kaip geometrinis demiurgas: koordinatė $P_1$ teleologiškai siekia $P_2$, nepaisydama, ar žiūrėsite į ją per mikroskopinį išmaniojo laikrodžio ekraną, ar projektuosite ant Mėnulio paviršiaus. Tai pati radikaliausia priešnuodžio forma prieš rastrinį trumparegiškumą ir vizualinį skaitmeninės epochos triukšmą.