Når du lager et nettsted, må webdesigneren ta hensyn til det fire hovedpunkter tenker på layout og visuell design av nettet, den tekst, bilder, farger og fonter ansatte.
Av disse fire punktene er det bildene vi skal gi størst betydning i dette innlegget, siden vi skal snakke om hvordan lage svg-filer siden det er veldig viktig å ta hensyn til kvaliteten på bildene du jobber med.
Behandlinger med SVG-filer, har økt av fagfolk og ikke så profesjonelle i designverdenen.
Hva er en SVG fil?
SVG er forkortelsen på engelsk for Scalabe Vector Graphics, på spansk, Scalable Vector Graphics. Det handler om en åpent og fritt format for å lage 2D-grafikk, to dimensjoner.
I motsetning til andre bildeformater, som JPG eller PNG, SVG er et skalerbart format, uansett hvor mye du vil øke størrelsen, siden kvaliteten på bildet opprettholdes. Det er et av de mest brukte formatene på nettsider for å plassere grafikk eller vektorbilder.
Hvorfor skal vi bruke SVG?
Med denne typen formater vil vektorbilder holde høy kvalitet, uavhengig av størrelse og oppløsning. Tvert imot, bilder som består av punktgrafikk, som består av piksler, mister kvalitet hvis størrelsen endres. SVG-formatet er definert av dets letthet og allsidighet.
Et annet poeng for å bruke dette formatet er dens lille størrelse, det vil si takket være dette øker lastehastigheten til sidene der de er. Disse bildene bygges av nettleseren, noe som bidrar til å redusere belastningen og forbruket på serveren.
I tillegg kan de lage animerte SVG-bilder for å gi nettstedet vårt en nærhet og trekke oppmerksomheten til seerne som besøker den.
SVG er et åpent format, dvs. kan gjennomgå forbedringer og oppdateringer. I tillegg kan SVG-filer redigeres med vektorredigeringsprogrammer, for eksempel Adobe Illustartor uten å miste kvalitet i visningen, den kan vises på hvilken som helst enhet. Det lar oss også skrive det ut uten å miste kvalitet.
Hvordan enkelt lage SVG-filer
Kanskje den enkleste måten å lage SVG-filer på, hvis du er kjent med dem, er gjennom et grafisk designprogram, som blant annet Illustrator, Corel Draw.
Med fokus på Illustrator-programmet, når vi skal bruke SVG-formatet, må vi ta hensyn til om vi har brukt gradienter eller andre effekter, som den kunstneriske effekten, uskarphet, børster, piksler osv. ettersom de er rasterisert når de lagres i SVG-filformat. Det anbefales å bruke SVG-filtereffekter for å legge til effekter slik at de ikke kan rasteriseres senere.
Et annet råd vi gir deg er å bruke enkle symboler og stier i illustrasjoner for bedre ytelse av nevnte format. Unngå å bruke børster med mye sporing da dette genererer en høyere databelastning.
For å lage en SVG-fil i dette programmet, Det første vi må ha åpent er et blankt lerret der vi skal jobbe med ideen vår.
Når arbeidet vårt er ferdig, er det vi skal gjøre å gå til verktøylinjen som vises over programmet, og vi vil velge alternativet fil, lagre som, og en popup-skjerm vises der den ber oss gi filen et navn og angi formatet vi vil lagre det i. Det er i denne siste delen vi må markere SVG-alternativet.
Når du velger SVG-typen, vises en dialogboks som viser oss ulike alternativer som må tas i betraktning.
Som en generell regel, i det første feltet som vises i tabellen, vises SVG 1.1-profilen. I det følgende gir det oss muligheten til å velge kildene som de gir oss standard til tekst merket i SVG og delsett som ingen. I vårt tilfelle har ikke dette verket fonter, hvis det gjorde det, måtte undersettalternativet endres fra ingen til alle piktogrammer.
Følgende avsnitt er veldig viktig, hvis vi påpeker embed-alternativet, vil bildene av komposisjonen bli integrert i filen, som vil føre til at den går opp i vekt hvis vi bruker mange punktgrafikkbilder. Hvis vi derimot markerer alternativet for å lenke, må vi være forsiktige med bildene hvis vi skal bruke dem på en nettside, siden vi må inkludere filene til bildene våre, og også, veldig viktig, vedlikeholde deres sti. Fordelen med dette alternativet er at filene vil veie mye mindre.
I avsnittet for avanserte alternativer finner vi alternativet til SVG-kode, dette alternativet vil indikere hvordan filen er inne, det vil si koden bak arbeidet vårt. Dette alternativet er viktig hvis du vil legge til SVG-filen din, for eksempel til din personlige WordPress, du trenger bare å kopiere koden og legge den til direkte i WordPress HTML-editoren.
Det siste rådet vi gir deg er at når du lagrer i SVG-format, husk at hvis du arbeider med forskjellige tegnebrett, vil bare det aktive tegnebrettet beholdes.
Hvis vi ønsker å gå videre og bruke SVG-effekter på illustrasjonen vår, tilbyr Illustrator oss et sett med effekter. For å gjøre dette, må vi velge et objekt eller en gruppe. For å bruke en effekt må vi velge effektvinduet, SVG-filtre og bruke det.
Når du bruker et SVG-filter, viser designprogrammet oss et vindu hvor En liste over filtre som kan brukes vises., når vi velger en, viser Illustrator oss hvordan den ser ut, men i en rasterisert versjon.
Som du har sett, er SVG-formatet har vært en revolusjon. Takket være potensialet og kvaliteten som den tilbyr, gjør nettsidene som vi finner mye mer attraktive uten å ofre ytelsen, så lenge de bruker nevnte format korrekt. SVG har blitt den perfekte foreningen mellom verden av design og webutvikling.