Scalable Vector Graphics ehk SVG mängib tänapäeval veebisaitide kujundamisel olulist rolli. Kui te praegu oma veebidisainitöös SVG-d ei kasuta, on siin mõned põhjused, miks peaksite seda tegema, ning ka varuvariante, mida saate kasutada vanemate brauserite jaoks, mis neid faile ei toeta.
Resolutsioon
SVG suurim eelis on eraldusvõime sõltumatus. Kuna SVG-failid on vektorgraafika (erinev alt pikslipõhistest rasterpiltidest), saate nende suurust muuta ilma pildikvaliteeti kaotamata. See on eriti kasulik, kui loote tundlike veebisaitide, mis peavad hea välja nägema ja töötama hästi paljudes ekraanisuurustes ja seadmetes. Saate SVG-faile üles või alla skaleerida, et vastata oma tundliku veebisaidi muutuvatele suuruse- ja paigutusvajadustele, ilma et see kahjustaks nende kvaliteeti.
Üldiselt on SVG-de välimus sujuvam ja teravam kui muudes vormingutes piltidel, olenemata suurusest.
Faili suurus
Üks väljakutse rasterpiltide (nt JPG, PNG, GIF) kasutamisel tundlikel veebisaitidel on faili suurus. Kuna rasterkujutised ei skaleerita nii, nagu vektorpildid teevad, peate esitama oma pikslipõhised pildid suurimas suuruses, milles neid kuvatakse. Seda seetõttu, et pilti saab alati väiksemaks muuta ja selle kvaliteeti säilitada, kuid see ei kehti piltide suuremaks muutmise kohta. Tulemuseks on pildid, mis on palju suuremad kui kuvatav suurus, mis sunnib brausereid alla laadima suuri faile.
Seevastu vektorgraafika on skaleeritav, nii et saate kasutada väga väikeseid failisuurusi olenemata sellest, kui suuri pilte võib vaja minna. See optimeerib lõpuks saidi üldist jõudlust ja allalaadimiskiirust.
CSS-i stiil
Saate lihts alt lisada SVG otse lehe HTML-i. Seda nimetatakse tekstisiseseks SVG-ks. Üks reasisese SVG kasutamise eelis on see, et kuna graafika joonistab tegelikult brauser, pole pildifaili toomiseks vaja
Veel üks eelis: saate CSS-i abil kujundada tekstisisese SVG. Kas soovite muuta SVG-ikooni värvi? Selle asemel, et seda pilti graafikatöötlustarkvaras redigeerida ning seejärel fail uuesti eksportida ja üles laadida, saate SVG-faili muuta lihts alt mõne CSS-i rea abil. CSS-i saate kasutada ka SVG-de muutmiseks hõljutusolekute ja muude disainivajaduste jaoks.
Alumine rida
Kuna saate tekstisiseseid SVG-faile stiilida CSS-iga, saate nende puhul kasutada ka CSS-animatsioone. CSS-i teisendused ja üleminekud on kaks lihtsat viisi SVG-dele elu andmiseks. Saate lehel rikkalikke Flashi sarnaseid kogemusi saada ilma Flashi kasutamata – mida iPad enam ei toeta. Tegelikult loobub Adobe Flashist järk-järgult 2020. aasta lõpuks.
SVG kasutusalad
Nii võimsad kui SVG-d on, ei saa need asendada kõiki teisi pildivorminguid. Rikkalikku värvisügavust nõudvad fotod peaksid siiski olema JPG- või PNG-vormingus, kuid lihtsad pildid, näiteks ikoonid, sobivad suurepäraselt SVG-vormingus esitamiseks.
SVG sobib ka mõnede keerukate illustratsioonide jaoks, nagu graafikud, diagrammid ja ettevõtte logod. Kogu see graafika on skaleeritav ja CSS-iga kujundatav.
Vanemate brauserite tugi
Praegune SVG tugi on tänapäevastes veebibrauserites väga hea. Ainsad brauserid, millel seda graafikat ei toeta, on Internet Exploreri vanad versioonid (mida Microsoft enam ei toeta) ja mõned Androidi vanad versioonid. Kokkuvõttes kasutab neid brausereid endiselt väga väike osa sirvivast elanikkonnast ja see arv väheneb jätkuv alt. See tähendab, et saate oma veebisaidil muretult kasutada SVG-d.
Kui soovite SVG-le varuvarianti pakkuda, kasutage sellist tööriista nagu Grumpicon filamentgrupist. See ressurss loob teie SVG-pildifailidest PNG-sid.
