Kodulehe loomisel peab veebidisainer arvestama neli põhipunkti mõeldes veebi paigutusele ja visuaalsele kujundusele, tekst, pildid, värvid ja fondid töötajad.
Nendest neljast punktist peame selles postituses kõige olulisemaks pildid, kuna me räägime kuidas luua svg-faile kuna on väga oluline arvestada nende piltide kvaliteediga, millega töötate.
Ravi SVG-failidega, on kasvanud spetsialistide poolt ja mitte nii disainimaailma professionaalid.
Mis on SVG-fail?
SVG on inglise keeles Scalabe Vector Graphics, hispaania keeles Scalabe Vector Graphics lühend. See räägib a avatud ja vabas vormingus millega luua 2D graafikat, kaks mõõdet.
Erinevalt teistest pildivormingutest, nagu JPG või PNG, SVG on skaleeritav formaat, olenemata sellest, kui palju soovite selle suurust suurendada, kuna pildi kvaliteet säilib. See on üks enim kasutatud vorminguid veebilehtedel graafika või vektorpiltide paigutamiseks.
Miks peaksime kasutama SVG-d?
Seda tüüpi vorminguga säilitavad vektorpildid kõrge kvaliteedi, olenemata nende suurusest ja eraldusvõimest. Vastupidi, pikslitest koosnevad bitikaartidest koosnevad pildid kaotavad nende suuruse muutmisel kvaliteedi. SVG-vormingut määrab selle kergus ja mitmekülgsus.
Teine punkt selle vormingu kasutamise kasuks on selle väiksus, see tähendab tänu sellele suurendab nende lehtede laadimiskiirust, kus need on. Need pildid on loodud brauseri poolt, mis aitab vähendada serveri koormust ja tarbimist.
Lisaks saavad nad luua animeeritud SVG-pilte millega anda meie veebisaidile lähedust ja juhtida seda külastavate vaatajate tähelepanu.
SVG on avatud formaat, st võib läbida täiustusi ja uuendusi. Lisaks saab SVG-faile redigeerida vektortöötlusprogrammidega, näiteks Adobe Illustartoriga, ilma et selle kuva kvaliteet kaotaks, seda saab vaadata igas seadmes. Samuti võimaldab see printida ilma kvaliteeti kaotamata.
Kuidas hõlpsasti SVG-faile luua
Võib-olla on kõige lihtsam viis SVG-failide loomiseks, kui olete nendega tuttav, läbi graafilise disaini programmide, nagu Illustrator, Corel Draw jne.
Keskendudes Illustratori programmile, peame SVG-vormingut kasutades arvestama, kas oleme kasutanud gradiente või muid efekte, nagu kunstiline efekt, hägusus, pintslid, pikslid jne. kuna need on SVG-vormingus salvestamisel rasteriseeritud. Soovitatav on kasutada SVG filtriefekte, lisada efekte, et neid hiljem rasterdada ei saaks.
Teine nõuanne, mille me teile anname, on kasutada lihtsad sümbolid ja teed illustratsioonides parema jõudluse tagamiseks nimetatud formaadist. Vältige suure jäljega pintslite kasutamist, kuna see tekitab suurema andmekoormuse.
Selles programmis SVG-faili loomiseks Esimene asi, mis meil peab olema, on tühi lõuend, kus me oma idee kallal töötame.
Kui meie töö on lõpetatud, läheme programmi kohal kuvatavale tööriistaribale ja valime faili, salvestage nimega ja ilmub hüpikaken, kus palutakse meil failile nimi anda ja märkige vorming, milles soovime selle salvestada. Selles viimases jaotises peame märkima SVG-valiku.
SVG tüübi valimisel kuvatakse dialoogiboks, mis näitab meile erinevaid valikuid, millega tuleb arvestada.
Üldreeglina kuvatakse tabeli esimesel väljal SVG 1.1 profiil. Järgnevalt annab see meile võimaluse valida allikad, milles nad meile annavad vaikimisi on SVG-s märgitud tekst ja alamhulk puudub. Meie puhul pole sellel tööl fonte, kui oleks, tuleks alamhulkade suvand nullist kõigi piktogrammide peale muuta.
Järgmine jaotis on väga oluline, kui juhime tähelepanu sellele embed suvandil, lisatakse kompositsiooni pildid faili, mille tõttu see kaalus juurde võtab, kui kasutame palju bitmap-pilte. Kui aga märgime linkimise võimaluse, peame olema piltidega ettevaatlikud, kui kavatseme neid veebisaidil kasutada, kuna peame kaasama oma piltide failid ja, mis on väga oluline, säilitama nende tee. Selle valiku eeliseks on see, et failid kaaluvad palju vähem.
Täpsemate valikute jaotisest leiame võimaluse SVG-kood, see valik näitab, kuidas fail sees on, st meie töö taga olev kood. See valik on oluline, kui soovite lisada oma SVG-faili, näiteks oma isiklikku WordPressi, peate lihtsalt koodi kopeerima ja lisama selle otse oma WordPressi HTML-i redaktorisse.
Viimane nõuanne, mille me teile anname, on see, et SVG-vormingus salvestamisel pidage meeles, et kui töötate erinevate joonistusplaatidega, jäetakse alles ainult aktiivne graafikatahvel.
Kui tahame minna kaugemale ja rakendada oma illustratsioonile SVG-efekte, pakub Illustrator meile efektide komplekti. Selleks peame valima objekti või rühma. Efekti rakendamiseks peame valima efektide akna, SVG-filtrid ja need rakendama.
SVG-filtri rakendamisel näitab disainiprogramm meile akent, kus Kuvatakse filtrite loend, mida saab rakendada, kui oleme ühe valinud, näitab Illustrator meile, kuidas see välja näeb, kuid rasterdatud versioonis.
Nagu olete näinud, SVG-vorming on olnud revolutsioon. Tänu selle potentsiaalile ja kvaliteedile mida see pakub, muudab meie arvates palju atraktiivsemaks ilma jõudlust ohverdamata, kui nad kasutavad seda vormingut õigesti. SVG-st on saanud täiuslik abielu veebidisaini ja -arenduse maailma vahel.