Når du opretter en hjemmeside, skal webdesigneren tage hensyn fire hovedpunkter tænker på layout og visuelle design af nettet, den tekst, billeder, farver og skrifttyper medarbejdere.
Af disse fire punkter er billederne, som vi vil give størst betydning i dette indlæg, da vi skal tale om hvordan man opretter svg-filer da det er meget vigtigt at tage højde for kvaliteten af de billeder, du arbejder med.
Behandlinger med SVG-filer, er steget af fagfolk og ikke så professionelle i designverdenen.
Hvad er en SVG fil?
SVG er forkortelsen på engelsk for Scalabe Vector Graphics, på spansk, Scalable Vector Graphics. Det handler om en åbent og gratis format til at skabe 2D-grafik, to dimensioner.
I modsætning til andre billedformater, såsom JPG eller PNG, SVG er et skalerbart format, uanset hvor meget du ønsker at øge dens størrelse, da kvaliteten af billedet vil blive bibeholdt. Det er et af de mest brugte formater på websider til at placere grafik eller vektorbilleder.
Hvorfor skal vi bruge SVG?
Med denne type format vil vektorbilleder bevare høj kvalitet, uanset deres størrelse og opløsning. Tværtimod mister billeder, der består af bitmaps, bestående af pixels, kvalitet, hvis størrelsen ændres. SVG-formatet er defineret af dets lethed og alsidighed.
Et andet punkt til fordel for at bruge dette format er dets lille størrelse, det vil sige takket være dette øger indlæsningshastigheden på siderne, hvor de er. Disse billeder er bygget af browseren, hvilket er med til at reducere belastningen og forbruget på serveren.
Derudover kan de oprette animerede SVG-billeder til at give vores hjemmeside en atmosfære af nærhed og tiltrække opmærksomhed fra de seere, der besøger den.
SVG er et åbent format, dvs. kan gennemgå forbedringer og opdateringer. Derudover kan SVG-filer redigeres med vektorredigeringsprogrammer, for eksempel Adobe Illustartor uden at miste kvalitet i sin visning, den kan ses på enhver enhed. Det giver os også mulighed for at printe det uden at miste kvalitet.
Sådan opretter du nemt SVG-filer
Måske er den nemmeste måde at oprette SVG-filer på, hvis du er fortrolig med dem, gennem et grafisk designprogram, såsom Illustrator, Corel Draw, blandt andre.
Med fokus på Illustrator-programmet, når vi skal bruge SVG-formatet, skal vi tage højde for, om vi har brugt gradienter eller andre effekter, såsom den kunstneriske effekt, sløring, pensler, pixels osv. da de rasteriseres, når de gemmes i SVG-filformat. Det anbefales at bruge SVG-filtereffekter for at tilføje effekter, så de ikke kan rasteriseres senere.
Et andet råd, vi giver dig, er at bruge enkle symboler og stier i illustrationer for bedre ydeevne af nævnte format. Undgå at bruge børster med meget sporing, da dette genererer en højere databelastning.
For at oprette en SVG-fil i dette program, Det første, vi skal have åbent, er et tomt lærred, hvor vi skal arbejde videre med vores idé.
Når vores arbejde er færdigt, hvad vi skal gøre er at gå til værktøjslinjen, der vises over programmet, og vi vil vælge muligheden for fil, gem som, og en pop op-skærm vises, hvor den fortæller os, at vi skal give vores fil et navn og angiv det format, som vi vil gemme det i. Det er i dette sidste afsnit, hvor vi skal markere SVG-indstillingen.
Når du vælger SVG-typen, vises en dialogboks, der viser os forskellige muligheder, der skal tages i betragtning.
Som hovedregel vises SVG 1.1-profilen i det første felt, der vises i tabellen. I det følgende giver det os mulighed for at vælge de kilder, som de giver os standard til tekst markeret i SVG og delsæt som ingen. I vores tilfælde har dette arbejde ikke skrifttyper, hvis det gjorde, skulle undersæt-indstillingen ændres fra ingen til alle piktogrammer.
Det følgende afsnit er meget vigtigt, hvis vi påpeger indlejringsmulighed, vil billederne af kompositionen blive inkorporeret i filen, hvilket vil få det til at tage på i vægt, hvis vi bruger mange bitmap-billeder. Hvis vi derimod markerer muligheden for at linke, skal vi være forsigtige med billederne, hvis vi skal bruge dem på en hjemmeside, da vi skal inkludere filerne til vores billeder, og også, meget vigtigt, vedligeholde deres sti. Fordelen ved denne mulighed er, at filerne vejer meget mindre.
I afsnittet med avancerede muligheder finder vi muligheden for at SVG-kode, denne mulighed vil angive, hvordan filen er inde, altså koden bag vores arbejde. Denne mulighed er essentiel, hvis du vil tilføje din SVG-fil, for eksempel til din personlige WordPress, du skal blot kopiere koden og tilføje den direkte i din WordPress HTML-editor.
Det sidste råd vi giver dig er, at når du gemmer i SVG-format, husk på, at hvis du arbejder med forskellige tegnebrætter, vil kun det aktive tegnebræt blive bevaret.
Hvis vi vil gå videre og anvende SVG-effekter på vores illustration, tilbyder Illustrator os et sæt effekter. For at gøre dette skal vi vælge et objekt eller en gruppe. For at anvende en effekt skal vi vælge effektvinduet, SVG-filtre og anvende det.
Når du anvender et SVG-filter, viser designprogrammet os et vindue, hvor En liste over filtre, der kan anvendes, vises, når vi har valgt en, viser Illustrator os, hvordan den ser ud, men i en rasteriseret version.
Som du har set, er SVG-formatet har været en revolution. Takket være dets potentiale og kvaliteten at det tilbyder, gør de websider, som vi finder meget mere attraktive uden at ofre ydeevnen, så længe de gør korrekt brug af nævnte format. SVG er blevet den perfekte forening mellem en verden af design og webudvikling.