Az <svg> elem használata

Az SVG (Scalable Vector Graphics) egy vektoros grafikai formátum, amelyet HTML-ben az <svg> elem segítségével használhatunk. A vektoros grafika előnye, hogy végtelenül skálázható minőségromlás nélkül.

Alap <svg> szerkezet

Az SVG egy saját nyelv, amelyben különböző elemek (pl. <rect>, <circle>, <line>) írják le a rajzolt objektumokat. Az <svg> elem szélességét és magasságát is meg kell adnunk.

Alakzatok létrehozása

Az SVG segítségével többféle alapvető alakzatot hozhatunk létre: köröket (<circle>), téglalapokat (<rect>) és vonalakat (<line>). Ezeket egyedi színnel, mérettel és elhelyezéssel szabhatjuk testre.

Szöveg az SVG-ben

Az SVG támogatja a szövegmegjelenítést is. A <text> elemmel elhelyezhetünk feliratokat, amelyek stílusozhatók betűtípussal, színnel és mérettel is.

SVG beágyazása HTML-be

Az SVG-t közvetlenül a HTML dokumentumba is beágyazhatjuk, vagy külön fájlként is hivatkozhatunk rá. Inline használat esetén könnyen manipulálható CSS-sel és JavaScript-tel.

Az SVG előnyei

Az SVG nem veszít minőségéből nagyításkor, könnyen animálható, kis fájlméretű, keresőbarát és hozzáférhető. Ezek miatt ideális logók, ikonok, diagramok és interaktív grafikák megjelenítésére.

Mire használjuk az SVG-t?

Az SVG tökéletes választás, ha precíz, reszponzív grafikákat szeretnél. Használhatod például adatvizualizációhoz, térképekhez, ikonokhoz, vagy animációkhoz.