A Scalable Vector Graphics, vagyis az SVG manapság fontos szerepet játszik a webhelyek tervezésében. Ha jelenleg nem használ SVG-t a webtervezési munkája során, íme néhány ok, amiért érdemes elkezdenie, valamint a tartalékok, amelyeket a régebbi böngészőkhöz használhat, amelyek nem támogatják ezeket a fájlokat.
Felbontás
Az SVG legnagyobb előnye a felbontás függetlensége. Mivel az SVG-fájlok vektorgrafikák (a pixel-alapú raszterképekkel ellentétben), átméretezheti őket a képminőség romlása nélkül. Ez különösen akkor hasznos, ha reszponzív webhelyeket hoz létre, amelyeknek jól kell kinézniük és jól kell működniük a képernyőméretek és eszközök széles skáláján. Az SVG-fájlokat felfelé vagy lefelé méretezheti, hogy alkalmazkodjon a reszponzív webhely változó méret- és elrendezési igényeihez anélkül, hogy a minőségük bármilyen módon romlana.
Általában az SVG-k megjelenése simább, élesebb, mint más formátumú képek, mérettől függetlenül.
Fájlméret
A raszterképek (pl. JPG, PNG, GIF) reszponzív webhelyeken való használatának egyik kihívása a fájlméret. Mivel a raszteres képek nem úgy méreteződnek, mint a vektoros képek, a pixel alapú képeket a legnagyobb méretben kell megjelenítenie. Ennek az az oka, hogy mindig lehet egy képet kicsinyíteni és megőrizni a minőségét, de ez nem igaz a nagyobb képekre. Az eredmény olyan képek, amelyek sokkal nagyobbak, mint a megtekintésük mérete, így a böngészők nagy fájlok letöltésére kényszerítik.
Ezzel szemben a vektorgrafika méretezhető, így nagyon kis fájlméreteket használhat, függetlenül attól, hogy milyen nagyban kell ezeket a képeket megjeleníteni. Ez végső soron optimalizálja a webhely általános teljesítményét és letöltési sebességét.
CSS-stílus
Könnyen hozzáadhatja az SVG-t közvetlenül az oldal HTML-kódjához. Ezt inline SVG-nek nevezik. Az inline SVG használatának egyik előnye, hogy mivel a grafikát valójában a böngésző rajzolja meg, nincs szükség HTTP-kérésre a képfájl lekéréséhez.
Egy másik előny: CSS segítségével stílusozhatja a soron belüli SVG-t. Módosítania kell egy SVG ikon színét? Ahelyett, hogy a képet grafikus szerkesztő szoftverben szerkesztené, majd exportálná és újra feltöltené a fájlt, egyszerűen módosíthatja az SVG-fájlt néhány soros CSS segítségével. A CSS segítségével módosíthatja az SVG-ket a lebegési állapotokhoz és más tervezési igényekhez is.
Bottom Line
Mivel a beágyazott SVG-fájlokat stílusozhatja CSS-sel, CSS-animációkat is használhat rajtuk. A CSS-átalakítások és -átmenetek két egyszerű módja annak, hogy életet adjunk az SVG-knek. Gazdag Flash-szerű élményeket szerezhet egy oldalon Flash használata nélkül – amit az iPad már nem támogat. Valójában az Adobe 2020 végére fokozatosan megszünteti a Flash használatát.
Az SVG használata
Bármennyire is erősek az SVG-k, nem helyettesíthetnek minden más képformátumot. A gazdag színmélységet igénylő fényképeknek továbbra is-j.webp
Az SVG bizonyos összetett illusztrációkhoz is megfelelő, például grafikonokhoz, diagramokhoz és vállalati logókhoz. Ezeknek a grafikáknak mindegyike előnye, hogy méretezhető és CSS-sel alakítható.
Régebbi böngészők támogatása
Az SVG jelenlegi támogatása nagyon jó a modern böngészőkben. Az egyetlen böngésző, amely nem támogatja ezeket a grafikákat, az Internet Explorer régi verziói (amelyet a Microsoft már nem támogat) és az Android néhány régi verziója. Összességében a böngészőpopuláció nagyon kis százaléka még mindig használja ezeket a böngészőket, és ez a szám folyamatosan csökken. Ez azt jelenti, hogy gond nélkül használhatja az SVG-t a webhelyén.
Ha tartalékot szeretne biztosítani az SVG számára, használjon olyan eszközt, mint a Grumpicon a Filament Groupból. Ez az erőforrás PNG-ket hoz létre az SVG képfájlokból.
