Praktiline SVG juhend
Ehkki formaat pole eriti uus, on SVG-pildid veebisaitide kujundamisel järjest populaarsemad. Kõik suuremad veebibrauserid toetavad vormingut ja SVG muudab mõtteviisi ja piltide veebi viimist.
Miks nad nii populaarsed on? Mis erineb SVG-failist täpsemalt? Täna on meil vastused ja kõik muu, mida peate selle failitüübiga alustamiseks teadma. (Väikese boonusena on kõik selle postituse pildid SVG-s saadaval Creative Marketist.)
Uurige Envato elemente
Mis on SVG?
Skaalautuva vektorgraafika ehk SVG on veebi jaoks välja töötatud vektoripõhine pildivorming. (Vektori ja rastervormingute kohta saate lisateavet eelmisest Design Shacki artiklist.)
Formaadi populaarsus on suurenenud tänu kõrglahutusega ekraanidele, kus kasutajad saavad näha kõiki piksleid (kui need on olemas). Kuna SVG on vektorvorming, renderdatakse pilt samal viisil - ja täiuslikult - sõltumata suurusest.
Märgistuskeele töötas esmakordselt välja World Wide Web Consortium, mis on üldisemalt tuntud kui W3C. W3C määratleb SVG kui “märgistuskeelt kahemõõtmeliste graafikarakenduste ja piltide ning nendega seotud graafikaskripti liideste kirjeldamiseks” . ” Seda toetavad kõik kaasaegsed brauserid - nii et te ei pea muretsema, kas SVG-failid renderdatakse korralikult või mitte - ja see töötab sõltumata seadme tüübist.
Praktilised rakendused
Mis teeb SVG nii populaarseks ja miks kasutavad seda rohkem disainerid? Lihtsalt, kuna see töötab.
SVG-failid on väikesed ja skaleeritavad. Ehkki vorming sobib kõige paremini kujundite jaoks, on sellel mitmesuguseid praktilisi rakendusi. Brändilogod, ikoonid, kasutajaliidese elemendid ja palju muid disainibitte võivad SVG-vormingus töötada. Suurim boonus on see, et nad on vektorid. Seega saab SVG-pilti kasutada peaaegu igas suuruses. (Mõned kõige pisemad failid võivad olla ainult nii suured.)
Ka SVG-faile on lihtne manipuleerida ja kontrollida. SVG-d saab mitte ainult salvestada staatilise pildina, vaid saate lisada ka interaktiivsust ja filtreid, et muuta pilt veelgi lõbusamaks. (SVG-faile saab animeerida ja värvida.)
Siin on mõned praktilised rakendused SVG kasutamiseks:
- Logod või pildid
- Taustpildina
- Objektina, näiteks nupuna
- Kaardistamine
- Diagrammid või joonised
Üldiselt sobib SVG kõige paremini piltide jaoks, mis võivad aja jooksul muutuda või muutuda või seadme tüübi järgi või sisaldavad animatsiooni või muid dünaamilisi efekte. Kasutage visuaalide, näiteks logode, visandite, kujundite, graafika ja diagrammide või muude lihtsate piltide vormingut.
Plussid SVG kasutamisega
Miks sa siis koliksid usalduslikust JPG-st või GIF-ist SVG-le? On palju põhjuseid, miks seda formaati võiks teie projektides kõige paremini kasutada. (Ja SVG-d on võimalik kasutada ka printimisel.)
- SVG on vektorvorming. Ainuüksi see on oluline, kui mõelda reageerivale kujundusele, kus pildi suurused muutuvad sageli seadmepõhiselt. SVG on piisavalt väike, et üks fail saaks kogu töö ära teha ja suurematel ekraanidel kvaliteet ei kaoks.
- SVG-pildid ja -käitumine on määratletud XML-iga, see tähendab, et pilte saab otsida indekseerimise, skriptimise ja tihendamise teel.
- SVG-kujutisega saate teha peaaegu kõike, mida saate teha mis tahes muu kujutisega, näiteks hõlmata mitmesuguseid kujundusvõtteid. Lihtne on lisada filtreid, segurežiime, värviefekte, värve, kärpimist ja maskeerimist, varjude langetamist ja peaaegu kõiki muid tehnikaid, mis teile meeldivad.
- SVG-failid on juurdepääsetavad.
- SVG töötab avatud veebistandarditega.
- SVG-d saate luua tekstipõhise koodi abil või joonistatud pildi abil. See annab teatud vabaduse, sõltuvalt teie vajadusest ja asjatundlikkuse tasemest erinevates valdkondades.
- Failide suurused on väikesed ja neid saab väiksemaks muuta. See tähendab, et graafika, mis oleks võinud olla suur, ei ole, suurendades laadimisaegu. (Alati boonus.)
Miinused SVG kasutamisel
Tõenäoliselt müüakse teid SVG-s pärast kõigi eeliste lugemist, eks? Kuid on ka mõnda negatiivset, millega arvestada.
- Vanemad brauserid - näiteks Internet Explorer 8 või vanemad - ei toeta SVG-d. Tõenäoliselt leiate töökoha (või ei pruugi sellest hoolida), kuid peaksite teadma, et mõni kasutaja ei näe teie pilte.
- SVG ei tööta keerukate piltide, näiteks fotode puhul. See on vorming, mis on mõeldud ainult kujunditele ja joontele.
Mis saab SVG-st edasi?
SVG tulevik alles algab. Vastuvõetud mobiilse pildivorminguna (ja standardina) kasvab SVG kasutamine ja arendamine ainult edasi.
W3C andmetel on "SVG 2 praegu väljatöötamisel ja see lisab SVG-le uusi kasutusmugavusfunktsioone ning integreerib tihedamalt HTML-i, CSS-i ja DOM-i ning amortiseerib funktsioone, mida kõik brauserid ei toeta."
Ka muid täiendusi viskatakse ümber. Trükitehnikat tootvad ettevõtted otsivad võimalusi SVG printimisprotsesside paremaks kasutamiseks ning neil on selliste tööstusharu liidrite nagu Adobe ja Canon tugi. Samuti laieneb kasutamine kaardistamisel ja GIS-is, võimaldades paremaid kaardistamise ja suumimise võimalusi.
Kui te tõesti mõtlema hakkate, on see peaaegu lõputu võimalus SVG kasutamiseks ja rakendamiseks kogu veebis ja trükitud kujunduses. (See on üks vektoripõhise formaadi ilu.)
SVG ressursid
Nüüd, kui olete SVG-st pisut põnevam ja näete, miks ja kuidas see teie projektidele kasulik võib olla, on meil olemas ressursside loend, mis aitavad teil alustada.
- Veebis SVG eksportimine Adobe Illustratoriga
- Manustage SVG otse HTML-lehtedele
- Üles ja töötab SVG videosarjaga
- SVG-profiilid
- CSS-nipid: SVG kasutamine
Järeldus
Kas kasutate juba oma projektides SVG-d? Kui ei, kas olete valmis muudatusi tegema?
SVG populaarsus kasvab peaaegu iga päev ja kuna see on avatud lähtekoodiga tööriist, loetakse need muudatused ja edusammud teile kohe ette. Te pole seotud ühegi müüja või tootega ja saate luua pilte, mis ühilduvad kogu kaasaegses veebis.
Stock Photos Loovturu viisakalt .
