SVG: definiție, concepte cheie și utilizare în dezvoltarea web

Ce este SVG?

SVG — un format de grafică vectorială bazat pe XML, apărut în 2001 ca recomandare W3C. Spre deosebire de formatele raster, SVG descrie imaginea prin primitive geometrice: puncte, linii, curbe și poligoane. Fișierul SVG este un document XML text obișnuit care poate fi citit, editat și comprimat cu instrumente standard.

Arhitectura SVG include câteva concepte cheie. viewBox definește un sistem de coordonate virtual, independent de dimensiunile reale ale elementului. De exemplu, viewBox="0 0 100 100" creează o grilă pătrată 100×100, în interiorul căreia toate coordonatele sunt fixe. La modificarea lățimii sau înălțimii containerului, conținutul se scalează proporțional.

Potrivit W3C SVG 2 Specification, versiunea modernă SVG suportă gradienti, măști, filtre, text cu poziționare arbitrară, interactivitate prin JavaScript și animație prin CSS și SMIL. SVG este integrat în DOM ca element HTML complet, ceea ce permite gestionarea programatică a fiecărui primitiv grafic.

În dezvoltarea mobilă, SVG este utilizat și în iOS prin UIGraphicsImageRenderer și în Android prin VectorDrawable — ambele formate convertesc descrieri similare SVG în rastere accelerate hardware pe GPU.

Istoria și dezvoltarea formatului SVG

SVG 1.0 a devenit recomandare W3C în 2001, SVG 1.1 în 2003, SVG 2.0 este în dezvoltare din 2012. Principala inovație a SVG 2 este integrarea mai profundă cu CSS, suportul pentru moduri de compunere și amestecare, precum și posibilitatea de a utiliza SVG în HTML fără prefixe de namespace.

Deși SVG 2 nu a atins încă statutul de Recomandare, browserele moderne suportă deja majoritatea funcționalităților sale. Chrome, Safari, Firefox și Edge au suport aproape complet pentru SVG 1.1 și o parte semnificativă din SVG 2.

Elementele de bază ale SVG

SVG oferă un set de elemente pentru descrierea graficii bidimensionale. Fiecare element are atribute care determină poziția, dimensiunea și aspectul vizual. Atributele pot fi specificate ca atribute XML sau prin proprietăți CSS.

• <rect> — dreptunghi cu atributele x, y, width, height, rx, ry (rotunjirea colțurilor).
• <circle> — cerc cu atributele cx, cy (centru) și r (rază).
• <ellipse> — elipsă cu atributele cx, cy, rx, ry.
• <line> — segment de dreaptă cu atributele x1, y1, x2, y2.
• <polyline> — linie frântă cu atributul points (listă de coordonate).
• <polygon> — poligon închis cu atributul points.
• <path> — contur arbitrar cu atributul d (comenzi: M, L, C, Q, A, Z).
• <text> — element text cu atributele x, y, font-size, font-family.

Elementul path — cel mai puternic și flexibil element SVG. Atributul d conține o secvență de comenzi: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Fiecare comandă are o formă absolută sau relativă (literă mare sau mică).

SVG suportă și gruparea elementelor prin <g>. Grupul moștenește atributele vizuale (fill, stroke, transform) asupra tuturor elementelor copil. Acest lucru permite aplicarea unui stil unitar întregului set de forme și gestionarea poziției lor printr-un singur transform.

SVG vs grafică raster: comparație a formatelor

Diferența principală între SVG și formatele raster (JPEG, PNG, WebP) — modul de stocare a informațiilor. Rasterul stochează culoarea fiecărui pixel într-o grilă de dimensiune fixă. SVG stochează comenzi matematice pentru reproducerea formelor. Această diferență determină toate avantajele și dezavantajele formatelor.

Potrivit HTTP Archive, 2025, 68% dintre site-urile web utilizează SVG pentru pictograme, 34% pentru ilustrații și 22% pentru logo-uri. Dimensiunea medie a unei pictograme SVG este de 0.5–2 KB, în timp ce o pictogramă raster de calitate similară — 5–20 KB în format PNG.

Pentru fotografii și imagini raster complexe, SVG nu este potrivit — dimensiunea descrierii XML va depăși dimensiunea unui JPEG echivalent. Domeniul recomandat de aplicare a SVG: pictograme, logo-uri, ilustrații, scheme, grafice, elemente de interfață cu design adaptiv.

Când să alegeți SVG și când formatul raster

SVG — alegerea optimă pentru elementele de interfață care trebuie să arate clar pe ecranele Retina și la orice scară a browserului. Raster — pentru fotografii, texturi complexe și imagini cu milioane de culori, unde descrierea vectorială ar fi nejustificat de complexă.

Abordarea hibridă — combinația SVG pentru elemente de interfață și WebP/AVIF pentru conținut foto — oferă cel mai bun echilibru între calitate și performanță de încărcare a paginii.

Inline SVG și stilizare prin CSS

Inline SVG — este încapsularea marcajului SVG direct în documentul HTML, nu ca fișier separat prin <img> sau background-image. Avantajul inline SVG este că elementele SVG devin parte din DOM și pot fi stilizate prin CSS, gestionate prin JavaScript și animate fără solicitări suplimentare la server.

Spre deosebire de <img src="icon.svg">, unde SVG este izolat în shadow DOM, inline SVG moștenește culorile și fonturile documentului părinte. Acest lucru permite, de exemplu, schimbarea culorii pictogramei la hover prin pseudo-clasa CSS :hover fără a încărca un fișier separat pentru fiecare stare.

Potrivit CSS-Tricks, inline SVG este metoda recomandată de utilizare a pictogramelor în aplicațiile web moderne. Proprietățile CSS fill, stroke, stroke-width se aplică direct elementelor SVG. Pentru personalizarea prin CSS, este important ca în SVG-ul original să nu fie setate fill și stroke ca atribute inline — altfel CSS nu le poate suprascrie.

• Avantaje: stilizare prin CSS, gestionare prin JS, fără cereri HTTP, adaptabilitate viewBox.
• Dezavantaje: creșterea dimensiunii paginii HTML, imposibilitatea cache-ului separat de HTML.
• Alternativă: SVG-sprite-uri — combinarea mai multor SVG într-un singur fișier și utilizarea <use href="#id">.

SVG-sprite-urile rezolvă problema cache-ului: toate pictogramele sunt colectate într-un singur fișier, browserul îl încarcă o dată, iar pictogramele individuale sunt conectate prin <use> cu indicarea id-ului elementului necesar în interiorul sprite-ului.

Animație SVG: CSS și SMIL

Animația CSS SVG — cea mai răspândită și eficientă metodă de animare a graficii vectoriale în browser. Proprietățile CSS, precum transform, opacity și fill, se aplică elementelor SVG la fel ca elementelor HTML. Pentru animația de-a lungul unei căi arbitrare se utilizează proprietatea CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) — un mecanism de animație încorporat în SVG, independent de CSS. Elementele <animate>, <animateTransform> și <animateMotion> permit animarea oricăror atribute SVG fără JavaScript și CSS. Animația SMIL este garantat sincronizată cu frecvența de cadre a browserului.

Potrivit MDN Web Docs, SMIL este suportat în toate browserele moderne, dar animația CSS este considerată mai predictibilă și mai eficientă. Principalul scenariu pentru SMIL — animația atributelor inaccesibile prin CSS, de exemplu d (path) al elementului <path>.

JavaScript + requestAnimationFrame oferă controlul maxim asupra animației SVG. Dezvoltatorii web utilizează bibliotecile GSAP și Anime.js pentru secvențe complexe de animații cu linii de timp și funcții de easing care sunt dificil de realizat prin CSS pur.

Exemple de cod: crearea graficii SVG

Primul exemplu — o pictogramă simplă de casă folosind elemente SVG de bază. Toate formele sunt rect și polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Al doilea exemplu — animația de rotație a unui loader prin CSS. Se utilizează <circle> cu atributul stroke-dasharray pentru a crea un contur întrerupt:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Al treilea exemplu — animația path prin biblioteca GSAP pentru trasarea lină a conturului. GSAP lucrează cu atributul stroke-dashoffset, creând efectul de apariție a liniei:

// Desenează calea cu GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});