Mi az az SVG?

SVG (Skálázható Vektorgrafika) XML-alapú vektorgrafikus formátum két dimenziós grafika létrehozására. A raszterképekkel ellentétben az SVG matematikai képletekkel írja le a grafikát, így lehetővé téve a képek méretezését minőségromlás nélkül.

Az SVG fő jellemzői:

• Vektorformátum: A képek geometriai primitívekkel (pontok, vonalak, görbék, alakzatok) vannak leírva, nem pixelekkel.
• XML-alapú: Az SVG dokumentum szerkezete XML szintaxison alapul, így könnyen olvasható és szerkeszthető.
• Skálázhatóság: A képek nagyíthatók vagy kicsinyíthetők anélkül, hogy elveszítenék élességüket vagy minőségüket.
• Interaktivitás: Az SVG elemek interaktívak lehetnek, reagálva eseményekre (kattintás, hover stb.) JavaScript segítségével.
• Stilizálás: Az SVG elemek megjelenése CSS segítségével testreszabható.
• Animáció: Az SVG támogatja az elemek animálását beépített eszközökkel vagy CSS/JavaScript segítségével.

Az SVG használatának előnyei a weben:

• Ideális ikonok és logók számára: A skálázhatóság éles megjelenést biztosít bármilyen képernyőfelbontáson.
• Kisebb fájlméret: Sok grafikai típus esetén az SVG fájlok kisebbek lehetnek, mint a hasonló raszterformátumok.
• SEO-barát: Az SVG szövege indexelhető a keresőmotorok által.
• Elérhetőség: A szöveges jellege miatt az SVG könnyebben hozzáférhető a segítő technológiák számára.
• Egyszerű módosítás: XML lévén a tartalom dinamikusan módosítható.

Egyszerű SVG kép példa (kör):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>