SVG: mi ez, kulcsfogalmak és használata a webfejlesztésben

Mi az SVG?

SVG — egy XML-alapú vektorgrafikus formátum, amely 2001-ben jelent meg W3C ajánlásként. Ellentétben a raszteres formátumokkal, az SVG a képet geometriai primitíveken keresztül írja le: pontok, vonalak, görbék és sokszögek. Az SVG fájl egy egyszerű szöveges XML dokumentum, amely standard eszközökkel olvasható, szerkeszthető és tömöríthető.

Az SVG architektúra több kulcsfontosságú koncepciót foglal magában. A viewBox egy virtuális koordinátarendszert határoz meg, függetlenül az elem tényleges méretétől. Például a viewBox="0 0 100 100" egy 100×100-as négyzet rácsot hoz létre, amelyen belül minden koordináta rögzített. A konténer szélességének vagy magasságának változásakor a tartalom arányosan méreteződik.

A W3C SVG 2 Specification szerint az SVG modern verziója támogatja a gradienseket, maszkokat, szűrőket, tetszőlegesen pozicionálható szöveget, interaktivitást JavaScripten keresztül és animációt CSS-en és SMIL-en keresztül. Az SVG teljes jogú HTML elemeként integrálódik a DOM-ba, ami lehetővé teszi minden grafikus primitív programozott kezelését.

A mobilfejlesztésben az SVG-t iOS-ben a UIGraphicsImageRenderer-en és Androidban a VectorDrawable-on keresztül is használják — mindkét formátum SVG-szerű leírásokat alakít át hardveresen gyorsított raszterekké a GPU-n.

Az SVG formátum története és fejlődése

Az SVG 1.0 2001-ben, az SVG 1.1 2003-ban lett W3C ajánlás, az SVG 2.0 2012 óta fejlesztés alatt áll. Az SVG 2 fő újdonsága a mélyebb integráció a CSS-sel, a compositing és blending modes támogatása, valamint az SVG használatának lehetősége HTML-ben névtér előtagok nélkül.

Bár az SVG 2 még nem érte el a Recommendation státuszt, a modern böngészők már támogatják funkcionalitásának nagy részét. A Chrome, Safari, Firefox és Edge majdnem teljes mértékben támogatják az SVG 1.1-et és az SVG 2 jelentős részét.

Az SVG alapelemei

Az SVG egy sor elemet kínál a kétdimenziós grafika leírásához. Minden elem rendelkezik attribútumokkal, amelyek meghatározzák annak pozícióját, méretét és vizuális megjelenését. Az attribútumok megadhatók XML attribútumokként vagy CSS tulajdonságokon keresztül.

• <rect> — téglalap x, y, width, height, rx, ry (saroklekerekítés) attribútumokkal.
• <circle> — kör cx, cy (középpont) és r (sugár) attribútumokkal.
• <ellipse> — ellipszis cx, cy, rx, ry attribútumokkal.
• <line> — vonalszakasz x1, y1, x2, y2 attribútumokkal.
• <polyline> — törött vonal points attribútummal (koordináták listája).
• <polygon> — zárt sokszög points attribútummal.
• <path> — tetszőleges kontúr d attribútummal (parancsok: M, L, C, Q, A, Z).
• <text> — szöveges elem x, y, font-size, font-family attribútumokkal.

A path elem — az SVG legerősebb és legrugalmasabb eleme. A d attribútum parancsok sorozatát tartalmazza: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Minden parancsnak van abszolút vagy relatív formája (nagy vagy kis betű).

Az SVG az elemek csoportosítását is támogatja a <g> elem segítségével. A csoport örökíti a vizuális attribútumokat (fill, stroke, transform) az összes gyermek elemre. Ez lehetővé teszi egységes stílus alkalmazását a formák teljes halmazára és pozíciójuk egyetlen transform segítségével történő kezelését.

SVG vs rasztergrafika: formátumok összehasonlítása

A fő különbség az SVG és a raszteres formátumok (JPEG, PNG, WebP) között — az információ tárolásának módja. A raszter minden pixel színét egy rögzített méretű rácsban tárolja. Az SVG matematikai parancsokat tárol az alakzatok reprodukálásához. Ez a különbség határozza meg a formátumok összes előnyét és hátrányát.

A HTTP Archive, 2025 szerint a weboldalak 68%-a használ SVG-t ikonokhoz, 34%-a illusztrációkhoz és 22%-a logókhoz. Egy SVG ikon átlagos mérete 0.5–2 KB, míg egy hasonló minőségű raszter ikon 5–20 KB PNG formátumban.

Fotók és összetett raszteres képek esetén az SVG nem alkalmas — az XML leírás mérete meghaladja a megfelelő JPEG méretét. Az SVG ajánlott alkalmazási területe: ikonok, logók, illusztrációk, semák, grafikonok, adaptív dizájnú interfész elemek.

Mikor válasszuk az SVG-t és mikor a raszteres formátumot

SVG — optimális választás az interfész elemekhez, amelyeknek élesnek kell lenniük Retina kijelzőkön és a böngésző bármilyen nagyításánál. Raszter — fotókhoz, összetett textúrákhoz és millió színt tartalmazó képekhez, ahol a vektoros leírás indokolatlanul összetett lenne.

Hibrid megközelítés — SVG kombinálása interfész elemekhez és WebP/AVIF fotó tartalomhoz — a legjobb egyensúlyt nyújtja a minőség és az oldalbetöltési teljesítmény között.

Inline SVG és stíluszás CSS-en keresztül

Inline SVG — az SVG jelölés közvetlen beágyazása a HTML dokumentumba, nem külön fájlként <img>-en vagy background-image-en keresztül. Az inline SVG előnye, hogy az SVG elemek a DOM részévé válnak, és CSS-en keresztül stíluszhatók, JavaScripten keresztül vezérelhetők és animálhatók további szerver kérések nélkül.

Ellentétben az <img src="icon.svg">-vel, ahol az SVG el van szigetelve a shadow DOM-ban, az inline SVG örökli a szülő dokumentum színeit és betűtípusait. Ez lehetővé teszi például az ikon színének megváltoztatását egér ráhúzáskor a CSS :hover pszeudoosztályon keresztül anélkül, hogy külön fájlt töltene be minden állapothoz.

A CSS-Tricks szerint az inline SVG az ajánlott módszer az ikonok használatára modern webalkalmazásokban. A CSS fill, stroke, stroke-width tulajdonságai közvetlenül az SVG elemekre vonatkoznak. A CSS-en keresztüli testreszabáshoz fontos, hogy az eredeti SVG-ben a fill és stroke ne legyenek inline attribútumokként beállítva — különben a CSS nem tudja felülírni őket.

• Előnyök: stíluszás CSS-en keresztül, vezérlés JS-en keresztül, nincs HTTP kérés, viewBox adaptálhatóság.
• Hátrányok: a HTML oldal méretének növekedése, a HTML-től külön történő gyorsőtés lehetetlensége.
• Alternatíva: SVG-spritek — több SVG egyesítése egy fájlba és <use href="#id"> használata.

Az SVG-spritek megoldják a gyorsőtési problémát: az összes ikon egy fájlba gyűlik, a böngésző egyszer tölti be, és az egyes ikonok a <use>-en keresztül csatlakoznak a sprite-on belüli szükséges elem id-jának megadásával.

SVG animáció: CSS és SMIL

CSS SVG animáció — a legelterjedtebb és leghatékonyabb módszer a vektorgrafika animálására a böngészőben. A CSS tulajdonságok, mint a transform, opacity és fill, ugyanúgy vonatkoznak az SVG elemekre, mint a HTML elemekre. Tetszőleges útvonal mentén történő animációhoz a CSS offset-path tulajdonság használható.

SMIL (Synchronized Multimedia Integration Language) — az SVG-be épített animációs mechanizmus, független a CSS-től. Az <animate>, <animateTransform> és <animateMotion> elemek lehetővé teszik bármely SVG attribútum animálását JavaScript és CSS nélkül. Az SMIL animáció garantáltan szinkronizálódik a böngésző képsebességével.

A MDN Web Docs szerint az SMIL támogatott minden modern böngészőben, de a CSS animáció kiszámíthatóbbnak és hatékonyabbnak számít. A fő forgatókönyv az SMIL számára — a CSS-en keresztül nem elérhető attribútumok animációja, például a <path> elem d (path) attribútumé.

JavaScript + requestAnimationFrame maximális kontrollt biztosít az SVG animáció felett. A webfejlesztők a GSAP és Anime.js könyvtárakat használják összetett animációs szekvenciákhoz idővonalakkal és easing függvényekkel, amelyeket nehéz tiszta CSS-sel megvalósítani.

Kód példák: SVG grafika létrehozása

Első példa — egyszerű házikon alap SVG elemek használatával. Az összes forma rect és 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>

Második példa — loader forgási animációja CSS-en keresztül. A <circle> elem stroke-dasharray attribútumával megszakított körvonal jön létre:

<!-- 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>

Harmadik példa — path animáció a GSAP könyvtáron keresztül a kontúr sima megrajzolásához. A GSAP a stroke-dashoffset attribútummal dolgozik, létrehozva a vonal megjelenésének hatását:

// Út rajzolása GSAP-pal
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"
});