6 põhjust, miks peaksite SVG-d kasutama

6 põhjust, miks peaksite SVG-d kasutama

Skaleeritav vektorgraafika (SVG-d) on pilditüübid, mida kõikides töölaua- ja mobiilibrauserites üldiselt toetatakse. Nende veebi- ja rakenduse kujundamisel kasutamise eelised on tohutud - räägime teile kuue suurema põhjuse kaudu.

01. See on resolutsioonist sõltumatu ja reageeriv

Pilte saab skaleerida samamoodi, nagu skaleerime kõiki muid elemente tundlik veebidisain . Tänu SVG vektorilisusele on pilt eraldusvõimest sõltumatu. Pilt näeb igal ekraanil karge, alates uutes nutitelefonides leiduvatest kaunitest ~ 285 ppi pikslitiheduse kuvaritest kuni ~ 85 ppi standardsete kuvariteni.

SVG-d kasutades võime peatada ‘@ 2x’ loomise. png ’pildid (kui te ei pea IE8-d toetama) ja looge kõigi meie ikoonide jaoks üks fail. SVG-pilte saab ka skaleerida samamoodi, nagu kohandame kõiki teisi elemente tundliku kujundusega.

Auhinnatud Sarah Drasneri sait kasutab SVG-d suurepäraselt ära

Auhinnatud Sarah Drasneri sait kasutab SVG-d suurepäraselt ära

02. Sellel on navigeeritav DOM

Brauseri sees oleval SVG-l on oma DOM. Brauser käsitleb SVG-d eraldi dokumendina ja paigutatakse seejärel lehe tavalisse DOM-i. See on atribuudi ‘viewBox’ jaoks oluline, kuna saame oma pildi joonistada mis tahes suurusele lõuendile, kuid seejärel kuvada seda brauseris mõnes teises, ilma et SVG-s olevaid omadusi värskendataks. See eraldi navigeeritav DOM on ka see, kuidas me suhtleme SVG-i elementidega CSS-i ja JavaScripti abil.

03. See on animeeritav

SVG-s olevaid elemente saab animeerida, et luua tõeliselt hämmastavaid interaktiivseid kogemusi, või animatsiooni abil saab liidesele, pildile või ikoonile lisada toredaid puudutusi. Animatsiooni saab luua CSS-i, Javascripti veebianimatsioonide API abil või kasutades SVG-d ’Silt.

SVG-animatsioon on huvipakkuvas arengupunktis. Google lõpetas Chrome 45-s SMS-i - SVG-i animeeritud märgendi - CSS-animatsioonide ja veebianimatsioonide API kasuks, kuid on sellest ajast alates peatanud.

04. See on stiilipõhine

Klasside nimede või ID-de abil saate SVG-s elemente kujundada ainult nende omadustega, mis erinevad tavapäraselt; ‘värvi’ asemel kasutame ‘fill’ ja ääre asemel ‘insult’. SVG kujundamisel on mõned piirangud, mis tulenevad sellest, kuidas lehel SVG-d kasutate.

Kui kasutate SVG-d pildisildina, ei saa te Internet Exploreris sisemuses olevaid elemente kujundada. Siiski on olemas polüfill - svg4everybody - mis selle probleemi lahendab.

Hakka reisijaks täna SVG animatsioon

05. See on interaktiivne

JavaScripti kasutades saame tänu navigeeritavale DOM-ile suhelda SVG-s sisalduvate elementidega. See võimaldab meil luua SVG-ga interaktiivseid elemente samamoodi nagu HTML-i ja CSS-i puhul.

Me võime ka JavaScripti kaudu animatsioone rakendada, kasutades uut veebianimatsioonide API-d, mis võimaldab programmeerida nii lihtsaid kui ka keerulisi interaktsioone ja animatsioone. Samuti saame kasutada mitmeid JavaScripti teeke, mis on loodud SVG-i töövoogude kiirendamiseks.

06. Väikesed failisuurused

Tulenevalt SVG vektorilisest olemusest (kujutades endast koordinaatide hulgast tõmmatud pilti) on nende failisuurused optimeerimisel väikesed, võrreldes peaaegu kõigi teiste pildifailide tüüpidega. SVG optimeerimiseks on mitmeid viise, alates käsurea tööriistadest kuni punktide ja rühmade käsitsi eemaldamiseni, kuid SVGOMG omab GUI-d ja palju võimalusi näpistamiseks, mis näitab visuaalselt optimeerimise käigus tehtavaid muudatusi.

Kuna SVG-d võivad olla tundlikud, animeeritud ja keerukad, pole põhjust, miks peaksite neid kasutama suurte kangelaskujutiste või blogipostituse või muu veebimeedia piltide jaoks.

Disainerid - püsige asjakohased ja tõhusad

Vaadake Dan Malli aadressil Generate New York

Photoshopi meistriks olemisest ei piisa enam. Disainerid peavad asjakohasuse ja efektiivsena püsimiseks oma oskusi kasvatama, kuid millele tasub keskenduda? Kas disainerid peaksid õppima kodeerima ja kui jah, siis kas piiratud kooditeadmised võivad andekate inseneridega töötamisel tõesti midagi muuta? Kuidas mahuvad disainerid Agile'i töövoogudesse? Kas projekti metoodika on üldse oluline? Milline roll on disaineril disainisüsteemide loomisel, kasutamisel ja hooldamisel?

Ülimalt sõbralik direktor Dan Mall jagab oma kõnes lugusid ja vaatenurki, et neile küsimustele ja muule vastata New Yorgi loomine 25.-27. Aprillil 2018 .

Hankige oma pilet kohe

See artikkel ilmus algselt loovajakirja Web Designer väljaandes 267, pakkudes asjatundlikke õpetusi, tipptasemel funktsioone ja olulisi ressursse. Telli juba täna.

Seotud artiklid: