A Scalable Vector Graphics használatának előnyei
A Scalable Vector Graphics vagy az SVG fontos szerepet játszik a weboldal tervezésében. Ha jelenleg nem használja az SVG-t a webes tervezési munkádhoz, itt van néhány oka annak, hogy miért kellene elkezdenie ezt, valamint a régebbi böngészőkre, 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 vektoros grafikák a pixel alapú raszterkép helyett, átméretezhetők anélkül, hogy elveszítenének bármilyen képminőséget. Ez különösen akkor hasznos, ha megfelelő weboldalakat 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 választékában .
Az SVG fájlok felfelé vagy lefelé kicsinyíthetők ahhoz, hogy eleget tudjanak tenni a válaszoló weboldal változó méretének és elrendezési igényeinek, és nem kell aggódnia azoktól a grafikáktól, amelyek minőséget okoznak bármilyen lépésben.
Fájl méret
Az egyik kihívás a raszteres képek (JPG, PNG, GIF) használatára a válaszoló weboldalakon a képek fájlmérete. Mivel a raszteres képek nem méretezik a vektortípusok méretét, a pixel alapú képeket a legnagyobb méretben kell megjeleníteniük. Ez azért van, mert mindig kisebb képet készíthet és megtarthatja annak minőségét, de ugyanez nem igaz a képek nagyobb méretére. A végeredmény az, hogy gyakran olyan képeket találsz, amelyek sokkal nagyobbak, mint amilyennek egy személy képernyőjén jelenik meg, ami azt jelenti, hogy szükségtelenül nagyon nagy fájl letöltésére kényszerülnek.
Az SVG foglalkozik ezzel a kihívással. Mivel a vektoros grafika skálázható, nagyon kicsi fájlméretek lehetnek, függetlenül attól, hogy mekkora méretűeknek kell megjelenniük. Ez végső soron pozitív hatással lesz a webhely általános teljesítményére és letöltési sebességére.
CSS stílus
Az SVG kód közvetlenül hozzáadható az oldal HTML-jéhez is. Ez az úgynevezett "inline SVG". Az inline SVG használatának egyik előnye, hogy mivel a grafikát a kódja alapján a böngésző ténylegesen rajzolja, nincs szükség HTTP kérésre egy képfájl lekérésére. Egy másik előny az, hogy az inline SVG stílusa CSS.
Kell változtatni az SVG ikon színét? Ahelyett, hogy egy képszerkesztő szoftverben megnyitná ezt a képet, és újból fel szeretné tölteni a fájlt, az SVG fájlt néhány sor CSS-sel egyszerűen megváltoztathatja.
Az SVG-grafikákon más CSS-stílusokat is használhat, ha azokat lebegtető állapotokban vagy bizonyos tervezési igényekhez kívánja módosítani. Akár animálni is tudod ezeket a grafikákat, hogy hozzáadj egy mozgást és interaktivitást egy oldalhoz.
animációk
Mivel az inline SVG fájlok CSS formátumúak, CSS animációk is használhatók rájuk. A CSS átalakítások és átmenetek két egyszerű módja annak, hogy néhány életet hozzáadjanak az SVG fájlokhoz. Gazdag Flash-szerű élményeket nyerhetsz egy oldalon, anélkül, hogy lemészetnél a Flash webhelyeken megjelenő hátrányaira .
Az SVG használata
Amennyire az SVG is nagy teljesítményű, ezek a grafika nem helyettesítheti minden olyan képformátumot, amelyet a webhelyén használ. A mély színmélységet igénylő fotóknak JPG vagy PNG fájlnak kell lenniük, de egyszerű képek, például az ikonok tökéletesen alkalmasak SVG-ként való végrehajtásra.
Az SVG alkalmas lehet bonyolultabb illusztrációkra, például vállalati logókra vagy grafikonokra és grafikonokra. A grafika mindegyike előnyös lesz a skálázhatónak, a CSS-nek és a jelen cikkben felsorolt egyéb előnyöknek.
Régebbi böngészők támogatása
Az SVG jelenlegi támogatása nagyon jó a modern internetes böngészőkben. Az egyetlen böngésző, amely valóban hiányzik a grafika támogatása, régebbi verziói az Internet Explorer (8-as és későbbi verziói) és néhány régebbi verziója Android. Mindent összevetve, a böngészõk nagyon kicsi százaléka használja ezeket a böngészõket, és ez a szám továbbra is zsugorodik. Ez azt jelenti, hogy az SVG biztonságosan használható a weboldalakon.
Ha szeretné biztosítani az SVG visszafoglalását, használhat olyan szerszámot, mint a Grumpicon a Filament csoportból. Ez az erőforrás az SVG képfájljait és a régebbi böngészők PNG-visszaiktatását hozza létre.
Szerkesztette: Jeremy Girard, 2007.07.21